"use client";

import Link from "next/link";
import { MenuIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { SignOutButton } from "@/components/sign-out-button";
import { ThemeToggle } from "@/components/theme-toggle";
import { BrandLockup } from "@/components/brand-mark";
import { BRAND_NAME } from "@/lib/brand";

type HeaderLink = {
  href: string;
  label: string;
};

export function SiteHeaderBar({
  links,
  primary,
  signedIn,
}: {
  links: HeaderLink[];
  primary?: HeaderLink | null;
  signedIn: boolean;
}) {
  return (
    <header className="sticky top-0 z-40 border-b border-border/70 bg-background/80 pt-[env(safe-area-inset-top)] backdrop-blur-md">
      <div className="page-pad mx-auto flex h-14 w-full max-w-6xl items-center justify-between gap-3 sm:h-16">
        <Link
          href="/"
          className="text-xl sm:text-2xl"
          aria-label={`${BRAND_NAME} home`}
        >
          <BrandLockup markClassName="size-6 sm:size-7" />
        </Link>
        <nav className="hidden items-center gap-1 sm:flex">
          {links.map((link) => (
            <Button key={link.href} asChild variant="ghost" size="sm">
              <Link href={link.href}>{link.label}</Link>
            </Button>
          ))}
          {primary ? (
            <Button asChild size="sm">
              <Link href={primary.href}>{primary.label}</Link>
            </Button>
          ) : null}
          <ThemeToggle />
          {signedIn ? <SignOutButton /> : null}
        </nav>
        <div className="flex items-center gap-1 sm:hidden">
          <ThemeToggle />
          <Sheet>
            <SheetTrigger asChild>
              <Button
                type="button"
                variant="outline"
                size="icon-lg"
                className="tap-target"
                aria-label="Open menu"
              >
                <MenuIcon aria-hidden="true" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-[min(20rem,90vw)]">
              <SheetHeader>
                <SheetTitle className="text-2xl">
                  <BrandLockup />
                </SheetTitle>
              </SheetHeader>
              <nav className="flex flex-col gap-2 px-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
                {links.map((link) => (
                  <Button asChild key={link.href} variant="ghost" className="tap-target justify-start">
                    <Link href={link.href}>{link.label}</Link>
                  </Button>
                ))}
                {primary ? (
                  <Button asChild className="tap-target justify-start">
                    <Link href={primary.href}>{primary.label}</Link>
                  </Button>
                ) : null}
                {signedIn ? (
                  <div className="pt-2">
                    <SignOutButton />
                  </div>
                ) : null}
              </nav>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  );
}