import { Link } from "@tanstack/react-router";
import { ShoppingBag } from "lucide-react";
import { cartCount, useCart } from "@/lib/cart-store";
import { cn } from "@/lib/utils";

type SiteHeaderProps = {
  variant?: "overlay" | "solid";
};

export function SiteHeader({ variant = "solid" }: SiteHeaderProps) {
  const count = useCart((s) => cartCount(s.items));
  const overlay = variant === "overlay";

  return (
    <header
      className={cn(
        "z-30 flex items-center justify-between gap-4 px-4 py-3 sm:px-6",
        overlay
          ? "pointer-events-none absolute inset-x-0 top-0 pt-[max(0.75rem,env(safe-area-inset-top))]"
          : "sticky top-0 border-b border-border bg-bg/92 backdrop-blur-sm",
      )}
    >
      <Link
        to="/"
        className={cn(
          "pointer-events-auto font-display text-xl tracking-tight text-fg sm:text-2xl",
        )}
      >
        STRATA
      </Link>
      <nav className="pointer-events-auto flex items-center gap-1 sm:gap-2">
        <Link
          to="/"
          className="hidden h-11 items-center px-3 text-sm text-muted hover:text-fg sm:inline-flex"
        >
          Ridge
        </Link>
        <Link
          to="/libraries"
          className="inline-flex h-11 items-center px-3 text-sm text-muted hover:text-fg"
        >
          Libraries
        </Link>
        <Link
          to="/store"
          className="inline-flex h-11 items-center px-3 text-sm text-muted hover:text-fg"
        >
          Store
        </Link>
        <Link
          to="/cart"
          className="relative inline-flex size-11 items-center justify-center rounded-md text-fg hover:bg-bg-elevated"
          aria-label={count ? `Cart, ${count} items` : "Cart"}
        >
          <ShoppingBag className="size-5" />
          {count > 0 ? (
            <span className="absolute right-1.5 top-1.5 min-w-4 rounded-full bg-accent px-1 text-center text-[10px] font-medium tabular-nums leading-4 text-accent-fg">
              {count}
            </span>
          ) : null}
        </Link>
      </nav>
    </header>
  );
}