Header Compact

import { useId, type ReactNode } from "react";
import { Plus, Search } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderCompactProps {
  title?: string;
  count?: number;
  tabs?: { label: string; href: string }[];
  activeTab?: string;
  filters?: string[];
  action?: { label: string; href: string };
  extra?: ReactNode;
  className?: string;
}

export function HeaderCompact({
  title = "Releases",
  count = 142,
  tabs = [
    { label: "All", href: "#all" },
    { label: "Drafts", href: "#drafts" },
    { label: "Published", href: "#published" },
  ],
  activeTab = "#all",
  filters = ["Project: acme-web", "Label: feature"],
  action = { label: "New", href: "#new" },
  extra,
  className,
}: HeaderCompactProps) {
  const searchId = useId();
  return (
    <header className={cn("da-stroke-b bg-da-surface text-da-surface-fg", className)}>
      <div className="flex h-14 items-stretch">
        <h1 className="da-stroke-r flex items-center gap-2 px-4 font-da-display text-lg tracking-da-display uppercase">
          {title}
          <span className="da-stroke bg-da-fg px-1.5 font-da-mono text-[11px] text-da-bg">{count}</span>
        </h1>
        <nav aria-label="Views" className="hidden sm:flex">
          <ul className="flex">
            {tabs.map((t) => {
              const on = t.href === activeTab;
              return (
                <li key={t.href} className="da-stroke-r flex">
                  <a
                    href={t.href}
                    aria-current={on ? "page" : undefined}
                    className={cn("da-focus flex items-center px-4 font-da-mono text-xs font-bold uppercase", on ? "bg-da-primary text-da-primary-fg" : "hover:bg-da-muted")}
                  >
                    {t.label}
                  </a>
                </li>
              );
            })}
          </ul>
        </nav>
        <form role="search" action="#" className="da-stroke-r ml-auto hidden items-center gap-2 px-3 md:flex">
          <Search aria-hidden className="size-4" strokeWidth={2.5} />
          <label htmlFor={searchId} className="sr-only">
            Search
          </label>
          <input id={searchId} type="search" name="q" placeholder="Filter…" className="w-40 bg-transparent text-sm font-medium outline-none placeholder:text-da-muted-fg" />
        </form>
        {extra}
        <a href={action.href} className="da-focus ml-auto flex items-center gap-2 bg-da-fg px-5 font-bold text-da-bg hover:bg-da-primary hover:text-da-primary-fg md:ml-0">
          <Plus aria-hidden className="size-4" strokeWidth={3} />
          {action.label}
        </a>
      </div>
      {filters.length > 0 && (
        <div className="da-stroke-t flex flex-wrap items-center gap-2 bg-da-surface-2 px-4 py-2">
          <span className="font-da-mono text-[11px] font-bold text-da-muted-fg uppercase">Filters</span>
          {filters.map((f) => (
            <span key={f} className="da-stroke bg-da-surface px-2 py-0.5 font-da-mono text-[11px] font-bold">
              {f}
            </span>
          ))}
        </div>
      )}
    </header>
  );
}

export default HeaderCompact;