import Link from 'next/link';
import { cn } from '@/lib/cn';
import { fmtInt } from '@/lib/format';

export type ChipItem = { href: string; label: string; count?: number | string | null; active?: boolean };

/**
 * Horizontal row of link chips (years, categories, ranges). Scrolls on mobile without a visible scrollbar,
 * wraps on desktop. Server component — selection lives in the URL.
 */
export function ChipRow({ items, label, className }: { items: ChipItem[]; label: string; className?: string }) {
  if (!items.length) return null;
  return (
    <nav aria-label={label} className={cn('no-scrollbar -mx-4 flex gap-1.5 overflow-x-auto px-4 md:mx-0 md:flex-wrap md:px-0', className)}>
      {items.map((it) => (
        <Link key={it.href + it.label} href={it.href} aria-current={it.active ? 'true' : undefined} className={cn('inline-flex h-9 shrink-0 items-center gap-1.5 border px-2.5 text-sm transition-colors', it.active ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
          <span>{it.label}</span>
          {it.count !== undefined && it.count !== null && <span className={cn('tnum text-[11px]', it.active ? 'text-canvas/70' : 'text-ink-3')}>{fmtInt(it.count)}</span>}
        </Link>
      ))}
    </nav>
  );
}