import { cn } from '@/lib/cn';
import { CategoryIcon } from './category-icons';

export type CategoryChipSize = 'sm' | 'md' | 'lg' | 'xl';
export type CategoryChipTone = 'cyan' | 'amber' | 'violet';

const sizes: Record<CategoryChipSize, string> = {
  sm: 'min-h-8 gap-1.5 px-3 text-xs [&_svg]:size-3.5',
  md: 'min-h-10 gap-2 px-4 text-sm [&_svg]:size-4',
  lg: 'min-h-12 gap-2.5 px-5 text-base [&_svg]:size-5',
  // TV / "Up next" hero size.
  xl: 'min-h-16 gap-3 px-7 text-xl sm:text-2xl [&_svg]:size-7',
};

const tones: Record<CategoryChipTone, string> = {
  cyan: 'border-cyan/45 bg-cyan/12 text-cyan-soft',
  amber: 'border-amber/50 bg-amber/12 text-amber-soft',
  violet: 'border-violet/50 bg-violet/15 text-violet-soft',
};

/** Category pill with its icon, e.g. "Science". Uppercase tracking matches the TV/phone mocks. */
export function CategoryChip({
  category,
  label,
  size = 'md',
  tone = 'cyan',
  className,
}: {
  /** Category key (drives the icon). */
  category: string;
  /** Human label, e.g. "Food & Drink". */
  label: string;
  size?: CategoryChipSize;
  tone?: CategoryChipTone;
  className?: string;
}) {
  return (
    <span
      className={cn(
        'inline-flex max-w-full items-center rounded-full border font-bold tracking-[0.12em] uppercase',
        sizes[size],
        tones[tone],
        className,
      )}
    >
      <CategoryIcon category={category} className="shrink-0" />
      <span className="truncate">{label}</span>
    </span>
  );
}