Header Tabs

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

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

/** Settings-style header: title + domain subtitle, then a row of text tabs with an ink underline on the active one sitting on the hairline; scrolls horizontally on mobile. */
export function HeaderTabs({
  title = "Settings",
  subtitle = "nord.studio",
  tabs = [
    { label: "General", href: "#general" },
    { label: "Domain", href: "#domain" },
    { label: "SEO", href: "#seo" },
    { label: "Members", href: "#members" },
    { label: "Billing", href: "#billing" },
    { label: "Danger zone", href: "#danger" },
  ],
  activeHref = "#domain",
  className,
}: HeaderTabsProps) {
  return (
    <header className={cn("border-b border-da-border bg-da-bg px-4 pt-8 text-da-fg sm:px-8", className)}>
      <h1 className="font-da-display text-3xl font-medium tracking-da-display">{title}</h1>
      <p className="mt-1 font-da-mono text-xs text-da-muted-fg">{subtitle}</p>
      <nav aria-label={`${title} sections`} className="mt-6 overflow-x-auto">
        <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 -mb-px block border-b-2 pb-3 text-[15px]",
                    on ? "border-da-fg text-da-fg" : "border-transparent text-da-muted-fg hover:text-da-fg",
                  )}
                >
                  {t.label}
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    </header>
  );
}

export default HeaderTabs;