import Link from 'next/link';

export interface TabDef {
  key: string;
  label: string;
  href: string;
  count?: number | null;
}

/**
 * Sticky, horizontally scrollable tab bar (server component; the current tab is a route segment).
 * These are links to distinct URLs, so the correct semantics are a labelled <nav> with
 * aria-current="page" — not the ARIA tabs pattern, which implies in-page panel switching.
 */
export function Tabs({ tabs, current, ariaLabel }: { tabs: TabDef[]; current: string; ariaLabel: string }) {
  return (
    <nav aria-label={ariaLabel} className="ci-tabs -mx-4 px-4 sm:-mx-6 sm:px-6">
      <ul className="m-0 flex list-none p-0">
        {tabs.map((t) => (
          <li key={t.key}>
            <Link href={t.href} className="ci-tab" {...(t.key === current ? { 'aria-current': 'page' as const } : {})} scroll={false}>
              {t.label}
              {t.count != null && t.count > 0 ? (
                <span className="ci-num ml-1 text-[11px] text-ink-3" aria-label={`${t.count} items`}>
                  {t.count}
                </span>
              ) : null}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}