Navbar

"use client";

import type { MouseEvent } from "react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Navbar,
  NavbarActions,
  NavbarBrand,
  NavbarContent,
  NavbarLink,
  NavbarLinks,
  NavbarMobileMenu,
} from "@/components/ui/navbar";
import { SheetClose } from "@/components/ui/sheet";

/**
 * Live Navbar example. `"use client"` only so the demo can swallow real
 * navigation and drive which link is `current` — the parts themselves are
 * server components. Resize the preview below `md` (768px) to see the inline
 * links hand off to the hamburger + Sheet (navbar.md#responsive-contract);
 * both trees are always in the DOM, one hidden by breakpoint, same approach
 * as the Sidebar Nav responsive example.
 */
const NAV_LINKS = [
  { href: "/overview", label: "Overview" },
  { href: "/components", label: "Components" },
  { href: "/pricing", label: "Pricing" },
];

const stayOnPage = (event: MouseEvent<HTMLAnchorElement>) =>
  event.preventDefault();

export function NavbarShowcase() {
  const [current, setCurrent] = useState(NAV_LINKS[0].href);

  return (
    <div className="flex flex-col gap-3">
      <div className="overflow-hidden rounded-md border border-solid border-border">
        <Navbar className="static">
          <NavbarContent>
            <NavbarBrand>
              <span className="rounded-md px-1 py-1.5 text-sm font-semibold leading-snug tracking-tight">
                Acme
              </span>
            </NavbarBrand>

            <NavbarLinks>
              {NAV_LINKS.map((link) => (
                <NavbarLink
                  key={link.href}
                  href={link.href}
                  current={link.href === current}
                  onClick={(event) => {
                    stayOnPage(event);
                    setCurrent(link.href);
                  }}
                >
                  {link.label}
                </NavbarLink>
              ))}
            </NavbarLinks>

            <NavbarActions>
              <Button variant="outline" size="sm">
                Sign in
              </Button>
            </NavbarActions>

            <NavbarMobileMenu>
              {NAV_LINKS.map((link) => (
                <SheetClose key={link.href}>
                  <NavbarLink
                    href={link.href}
                    current={link.href === current}
                    onClick={(event) => {
                      stayOnPage(event);
                      setCurrent(link.href);
                    }}
                  >
                    {link.label}
                  </NavbarLink>
                </SheetClose>
              ))}
            </NavbarMobileMenu>
          </NavbarContent>
        </Navbar>
      </div>
      <p className="text-xs leading-snug text-muted-foreground">
        Narrow viewport (below 768px) — inline links hand off to the menu
        button; brand and the “Sign in” action stay visible either way.
      </p>
    </div>
  );
}