Navbar Blur

"use client";

import { useEffect, useId, useState } from "react";
import { Menu, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface NavbarBlurLink {
  label: string;
  href: string;
}

export interface NavbarBlurProps {
  brand?: string;
  brandHref?: string;
  links?: NavbarBlurLink[];
  signIn?: NavbarBlurLink;
  cta?: NavbarBlurLink;
  className?: string;
}

function Logo() {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className="size-5" fill="none">
      <path d="M3 12h4l2.5-6 5 12 2.5-6H21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function NavbarBlur({
  brand = "Tracewise",
  brandHref = "/",
  links = [
    { label: "Product", href: "#product" },
    { label: "Customers", href: "#customers" },
    { label: "Pricing", href: "#pricing" },
    { label: "Changelog", href: "#changelog" },
    { label: "Docs", href: "#docs" },
  ],
  signIn = { label: "Log in", href: "#login" },
  cta = { label: "Start free", href: "#signup" },
  className,
}: NavbarBlurProps) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const menuId = useId();

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  return (
    <header
      className={cn(
        "da-transition sticky top-0 z-40 border-b text-da-fg backdrop-blur-da",
        scrolled || open ? "border-da-border bg-da-bg/75" : "border-transparent bg-transparent",
        className,
      )}
    >
      <nav aria-label="Main" className="da-container flex h-14 items-center gap-8">
        <a href={brandHref} className="da-focus flex items-center gap-2 rounded-da-sm text-[15px] font-semibold tracking-tight">
          <span className="grid size-7 place-items-center rounded-da-md bg-da-fg text-da-bg">
            <Logo />
          </span>
          {brand}
        </a>
        <ul className="hidden items-center gap-1 md:flex">
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} className="da-focus da-transition rounded-da-md px-3 py-1.5 text-sm text-da-muted-fg hover:text-da-fg">
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <div className="ml-auto hidden items-center gap-2 md:flex">
          <a href={signIn.href} className="da-focus da-transition rounded-da-md px-3 py-1.5 text-sm text-da-muted-fg hover:text-da-fg">
            {signIn.label}
          </a>
          <a
            href={cta.href}
            className="da-focus da-transition inline-flex h-8 items-center rounded-da-md bg-da-fg px-3.5 text-sm font-medium text-da-bg hover:bg-da-fg/85"
          >
            {cta.label}
          </a>
        </div>
        <button
          type="button"
          aria-expanded={open}
          aria-controls={menuId}
          aria-label={open ? "Close menu" : "Open menu"}
          onClick={() => setOpen((o) => !o)}
          className="da-focus da-transition ml-auto grid size-9 place-items-center rounded-da-md text-da-muted-fg hover:bg-da-fg/5 hover:text-da-fg md:hidden"
        >
          {open ? <X aria-hidden className="size-5" /> : <Menu aria-hidden className="size-5" />}
        </button>
      </nav>
      <div id={menuId} hidden={!open} className="md:hidden">
        <ul className="da-container flex flex-col gap-1 pb-3">
          {links.map((l) => (
            <li key={l.href}>
              <a href={l.href} onClick={() => setOpen(false)} className="da-focus block rounded-da-md px-3 py-2.5 text-[15px] hover:bg-da-fg/5">
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <div className="da-container grid grid-cols-2 gap-2 border-t border-da-border py-3">
          <a href={signIn.href} className="da-focus da-stroke rounded-da-md py-2 text-center text-sm font-medium">
            {signIn.label}
          </a>
          <a href={cta.href} className="da-focus rounded-da-md bg-da-fg py-2 text-center text-sm font-medium text-da-bg">
            {cta.label}
          </a>
        </div>
      </div>
    </header>
  );
}

export default NavbarBlur;