Header Tabs

import { cn } from "@/lib/utils";

export interface HeaderTabsProps {
  title?: string;
  tabs?: { label: string; href: string; count?: number }[];
  activeHref?: string;
  action?: { label: string; href: string };
  className?: string;
}

/** Section header with pill tabs: serif title and a sage action on one row, then a sand track of pill links (active one cream with shadow, counts in small circles) that scrolls on mobile. */
export function HeaderTabs({
  title = "Suppliers",
  tabs = [
    { label: "All", href: "#all", count: 38 },
    { label: "Data shared", href: "#shared", count: 21 },
    { label: "Invited", href: "#invited", count: 12 },
    { label: "Estimated", href: "#estimated", count: 5 },
  ],
  activeHref = "#invited",
  action = { label: "Invite suppliers", href: "#invite" },
  className,
}: HeaderTabsProps) {
  return (
    <header className={cn("bg-da-bg px-4 pt-8 pb-4 text-da-fg sm:px-8", className)}>
      <div className="flex flex-wrap items-center justify-between gap-4">
        <h1 className="font-da-display text-4xl">{title}</h1>
        <a
          href={action.href}
          className="da-focus da-transition inline-flex h-11 items-center rounded-da-pill bg-da-primary px-5 font-medium text-da-primary-fg hover:bg-da-primary/90"
        >
          {action.label}
        </a>
      </div>
      <nav aria-label={`${title} views`} className="mt-6 overflow-x-auto">
        <ul className="inline-flex gap-1 rounded-da-pill bg-da-surface-2 p-1">
          {tabs.map((t) => {
            const on = t.href === activeHref;
            return (
              <li key={t.href} className="shrink-0">
                <a
                  href={t.href}
                  aria-current={on ? "page" : undefined}
                  className={cn(
                    "da-focus da-transition inline-flex h-10 items-center gap-2 rounded-da-pill px-4 text-[15px] whitespace-nowrap",
                    on ? "bg-da-surface text-da-fg shadow-da-sm" : "text-da-muted-fg hover:text-da-fg",
                  )}
                >
                  {t.label}
                  {t.count !== undefined && (
                    <span
                      className={cn("grid h-6 min-w-6 place-items-center rounded-full px-1.5 text-xs", on ? "bg-da-accent text-da-accent-fg" : "bg-da-surface")}
                    >
                      {t.count}
                    </span>
                  )}
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    </header>
  );
}

export default HeaderTabs;