import type { ReactNode } from 'react';

import { cn, type Accent } from '@/lib/cn';

interface FlowNodeProps {
  accent?: Accent;
  children: ReactNode;
  className?: string;
}

const ACCENT_BORDER_TEXT: Record<Accent, string> = {
  red: 'border-red text-red',
  orange: 'border-orange text-orange',
  yellow: 'border-yellow text-yellow',
  green: 'border-green text-green',
  cyan: 'border-cyan text-cyan',
  blue: 'border-blue text-blue',
  purple: 'border-purple text-purple',
  pink: 'border-pink text-pink',
  rose: 'border-rose text-rose',
  teal: 'border-teal text-teal',
};

/** Flow node from design.md §5.5 — chained horizontally with arrows in flex rows. */
export function FlowNode({ accent, children, className }: FlowNodeProps) {
  return (
    <span
      className={cn(
        'inline-block bg-bg-card rounded-md border px-3 py-2 font-mono text-4xs whitespace-nowrap shrink-0',
        accent ? ACCENT_BORDER_TEXT[accent] : 'border-border text-text',
        className,
      )}
    >
      {children}
    </span>
  );
}