Header Tabs

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

export interface HeaderTabsProps {
  title?: string;
  status?: { label: string; tone: "success" | "warning" | "danger" | "neutral" };
  subtitle?: string;
  tabs?: { label: string; href: string; count?: number }[];
  activeHref?: string;
  className?: string;
}

const TONE = {
  success: "bg-da-success/12 text-da-success",
  warning: "bg-da-warning/20 text-da-fg",
  danger: "bg-da-danger/10 text-da-danger",
  neutral: "bg-da-muted text-da-muted-fg",
} as const;

/** Record header (e.g. a customer): avatar initials, name + status pill, subtitle, action buttons, and an underline tab bar (links with aria-current and counts) that scrolls horizontally on mobile. */
export function HeaderTabs({
  title = "Northwind Traders",
  status = { label: "Good standing", tone: "success" },
  subtitle = "Customer since 2023 · Net 30 · USD",
  tabs = [
    { label: "Overview", href: "#overview" },
    { label: "Invoices", href: "#invoices", count: 12 },
    { label: "Payments", href: "#payments", count: 38 },
    { label: "Contacts", href: "#contacts", count: 3 },
    { label: "Activity", href: "#activity" },
    { label: "Settings", href: "#settings" },
  ],
  activeHref = "#invoices",
  className,
}: HeaderTabsProps) {
  const initials = title
    .split(" ")
    .map((w) => w[0])
    .slice(0, 2)
    .join("");
  return (
    <header className={cn("border-b border-da-border bg-da-surface text-da-surface-fg", className)}>
      <div className="flex flex-wrap items-center gap-4 px-4 pt-6 sm:px-6 lg:px-8">
        <span aria-hidden className="grid size-12 place-items-center rounded-da-lg bg-da-accent font-da-display text-lg font-extrabold text-da-accent-fg">
          {initials}
        </span>
        <div className="min-w-[12rem] flex-1">
          <div className="flex flex-wrap items-center gap-2">
            <h1 className="font-da-display text-xl font-extrabold tracking-da-display">{title}</h1>
            <span className={cn("rounded-da-pill px-2 py-0.5 text-xs font-semibold", TONE[status.tone])}>{status.label}</span>
          </div>
          <p className="mt-0.5 text-sm text-da-muted-fg">{subtitle}</p>
        </div>
        <div className="flex gap-2">
          <button type="button" className="da-focus da-stroke h-9 rounded-da-md bg-da-surface px-3 text-sm font-semibold hover:border-da-border-strong">
            Send statement
          </button>
          <button type="button" className="da-focus h-9 rounded-da-md bg-da-primary px-3 text-sm font-semibold text-da-primary-fg hover:bg-da-primary/90">
            New invoice
          </button>
        </div>
      </div>
      <nav aria-label="Customer sections" className="mt-5 overflow-x-auto px-4 sm:px-6 lg:px-8">
        <ul className="flex gap-6">
          {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 flex items-center gap-1.5 border-b-2 pb-3 text-sm font-medium",
                    on ? "border-da-primary text-da-fg" : "border-transparent text-da-muted-fg hover:border-da-border-strong hover:text-da-fg",
                  )}
                >
                  {t.label}
                  {t.count !== undefined && (
                    <span className={cn("rounded-da-sm px-1.5 font-da-mono text-[11px]", on ? "bg-da-primary/10 text-da-primary" : "bg-da-muted")}>
                      {t.count}
                    </span>
                  )}
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    </header>
  );
}

export default HeaderTabs;