Navbar Centered

"use client";

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

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

export interface NavbarCenteredProps {
  brand?: string;
  brandHref?: string;
  leftLinks?: NavbarCenteredLink[];
  rightLinks?: NavbarCenteredLink[];
  cta?: NavbarCenteredLink;
  className?: string;
}

export function NavbarCentered({
  brand = "Shipyard",
  brandHref = "/",
  leftLinks = [
    { label: "Product", href: "#product" },
    { label: "Changelog", href: "#changelog" },
  ],
  rightLinks = [
    { label: "Pricing", href: "#pricing" },
    { label: "Log in", href: "#login" },
  ],
  cta = { label: "Start free", href: "#signup" },
  className,
}: NavbarCenteredProps) {
  const [open, setOpen] = useState(false);
  const menuId = useId();
  const all = [...leftLinks, ...rightLinks];

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

  const linkClass =
    "da-focus da-transition px-3 py-1.5 font-da-mono text-xs font-bold tracking-da-label uppercase underline decoration-transparent decoration-[3px] underline-offset-[6px] hover:decoration-da-fg";

  return (
    <header className={cn("bg-da-bg px-4 pt-4 text-da-fg", className)}>
      <nav aria-label="Main" className="da-stroke mx-auto grid h-16 max-w-(--da-container) grid-cols-[1fr_auto_1fr] items-center bg-da-surface px-3 text-da-surface-fg shadow-da-md">
        <ul className="hidden items-center gap-1 md:flex">
          {leftLinks.map((l) => (
            <li key={l.href}>
              <a href={l.href} className={linkClass}>
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <button
          type="button"
          aria-expanded={open}
          aria-controls={menuId}
          aria-label={open ? "Close menu" : "Open menu"}
          onClick={() => setOpen((o) => !o)}
          className="da-focus grid size-10 place-items-center md:hidden"
        >
          {open ? <X aria-hidden className="size-5" /> : <Menu aria-hidden className="size-5" />}
        </button>
        <a
          href={brandHref}
          className="da-focus da-stroke col-start-2 -rotate-2 bg-da-primary px-4 py-1 font-da-display text-xl tracking-da-display text-da-primary-fg uppercase shadow-da-sm"
        >
          {brand}
        </a>
        <div className="flex items-center justify-end gap-1">
          <ul className="hidden items-center gap-1 md:flex">
            {rightLinks.map((l) => (
              <li key={l.href}>
                <a href={l.href} className={linkClass}>
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
          <a
            href={cta.href}
            className="da-focus da-transition da-stroke ml-2 bg-da-fg px-3 py-2 text-sm font-bold text-da-bg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none"
          >
            {cta.label}
          </a>
        </div>
      </nav>
      <div id={menuId} hidden={!open} className="da-stroke mx-auto mt-2 max-w-(--da-container) bg-da-surface text-da-surface-fg shadow-da-md md:hidden">
        <ul className="grid grid-cols-2">
          {all.map((l, i) => (
            <li key={l.href} className={cn("da-stroke-b", i % 2 === 0 && "da-stroke-r")}>
              <a href={l.href} onClick={() => setOpen(false)} className="da-focus block p-4 font-bold uppercase hover:bg-da-primary hover:text-da-primary-fg">
                {l.label}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </header>
  );
}

export default NavbarCentered;