import { ArrowDown, ArrowUp, Minus } from 'lucide-react';
import { cn } from '@/lib/utils';

export type SignalDirection = 'up' | 'down' | 'neutral';

export interface SignalProps {
  /** Direction of the signal. */
  direction: SignalDirection;
  /** Text label shown inside the pill. */
  label?: string;
  /** Additional class names. */
  className?: string;
}

const directionStyles: Record<SignalDirection, string> = {
  up: 'bg-signal-up/10 text-signal-up',
  down: 'bg-signal-down/10 text-signal-down',
  neutral: 'bg-signal-neutral/10 text-signal-neutral',
};

const icons: Record<SignalDirection, React.ElementType> = {
  up: ArrowUp,
  down: ArrowDown,
  neutral: Minus,
};

/**
 * Signal pill — shows direction (up/down/neutral) with arrow icon and optional label.
 * Uses `--signal-*` design tokens.
 */
export function Signal({ direction, label, className }: SignalProps) {
  const Icon = icons[direction];

  return (
    <span
      className={cn(
        'inline-flex items-center gap-1 rounded-pill px-2 py-0.5 text-xs font-medium',
        directionStyles[direction],
        className,
      )}
    >
      <Icon className="h-3 w-3" aria-hidden="true" />
      {label && <span>{label}</span>}
    </span>
  );
}