import { cn } from '@/lib/cn';

const tone: Record<string, string> = {
  W: 'bg-win/20 text-win border-win/40',
  D: 'bg-draw/20 text-draw border-draw/40',
  L: 'bg-loss/20 text-loss border-loss/40',
};

/** Recent W/D/L results as coloured chips. Input is most-recent-first; we render
 *  oldest → newest (left to right) like a standard form guide. */
export function FormChips({ form, className }: { form: string[]; className?: string }) {
  if (!form.length) return <span className="text-xs text-faint">no recent data</span>;
  return (
    <span className={cn('inline-flex gap-1', className)}>
      {[...form].reverse().map((r, i) => (
        <span
          key={i}
          className={cn('grid h-5 w-5 place-items-center rounded border text-[11px] font-bold', tone[r] ?? 'bg-elevated text-faint border-line')}
          title={r === 'W' ? 'Win' : r === 'D' ? 'Draw' : r === 'L' ? 'Loss' : r}
        >
          {r}
        </span>
      ))}
    </span>
  );
}
