import Link from "next/link";
import { ThemeToggle } from "./theme-toggle";
import { SearchBox } from "./search-box";
import { Compass } from "lucide-react";

const NAV = [["/tools", "Directory"], ["/categories", "Categories"], ["/collections", "Collections"], ["/compare", "Compare"], ["/about", "About"]] as const;
export function SiteHeader({ compact = false }: { compact?: boolean }) {
  return (
    <header className="sticky top-0 z-40 border-b border-line/80 bg-bg/85 backdrop-blur supports-[backdrop-filter]:bg-bg/70">
      <div className="mx-auto flex h-14 max-w-7xl items-center gap-3 px-4 sm:px-6">
        <Link href="/" className="flex items-center gap-2 font-semibold tracking-tight" aria-label="Tools · SPBoucher home">
          <span className="grid h-8 w-8 place-items-center rounded-lg bg-accent text-accent-fg"><Compass className="h-4 w-4" aria-hidden /></span>
          <span className="display text-lg">Tools<span className="text-fg-3"> · </span><span className="text-fg-2">SPBoucher</span></span>
        </Link>
        <div className="hidden flex-1 justify-center md:flex">{!compact && <SearchBox size="sm" />}</div>
        <nav aria-label="Primary" className="ml-auto hidden items-center gap-1 lg:flex">
          {NAV.map(([href, l]) => <Link key={href} href={href} className="rounded-lg px-3 py-1.5 text-sm text-fg-2 hover:bg-bg-3 hover:text-fg">{l}</Link>)}
        </nav>
        <ThemeToggle />
        <details className="relative lg:hidden">
          <summary className="btn-ghost h-9 cursor-pointer list-none px-3 text-sm" aria-label="Open menu">Menu</summary>
          <nav aria-label="Mobile" className="absolute right-0 mt-2 w-48 overflow-hidden rounded-xl border border-line bg-bg-2 p-1 shadow-lift">
            {NAV.map(([href, l]) => <Link key={href} href={href} className="block rounded-lg px-3 py-2 text-sm hover:bg-bg-3">{l}</Link>)}
          </nav>
        </details>
      </div>
      {!compact && <div className="border-t border-line/60 px-4 py-2 md:hidden"><SearchBox size="sm" /></div>}
    </header>
  );
}