"use client";

import { useState } from "react";

const NAV = [
  { label: "Overview", href: "#overview" },
  { label: "Customers", href: "#customers" },
  { label: "Invoices", href: "#invoices", badge: "12" },
  { label: "Reports", href: "#reports" },
  { label: "Team", href: "#team" },
];

export function DashboardNavbar() {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState("Overview");

  return (
    <div className="bg-zinc-50 text-zinc-900 antialiased font-sans">
      <header className="border-b border-zinc-200 bg-white">
        <div className="flex h-12 items-center gap-3 border-b border-zinc-200 px-4 text-[13px]">
          <button
            type="button"
            className="inline-flex items-center gap-2 rounded-md border border-zinc-200 px-2 py-1 hover:bg-zinc-50"
          >
            <span
              aria-hidden
              className="grid h-5 w-5 place-items-center rounded bg-gradient-to-br from-fuchsia-500 to-violet-600 text-[10px] font-bold text-white"
            >
              A
            </span>
            Acme Inc.
            <span aria-hidden className="text-zinc-400">▾</span>
          </button>
          <span aria-hidden className="text-zinc-300">/</span>
          <button
            type="button"
            className="inline-flex items-center gap-2 rounded-md px-2 py-1 hover:bg-zinc-50"
          >
            Production
            <span aria-hidden className="text-zinc-400">▾</span>
          </button>

          <div className="ml-auto flex items-center gap-2">
            <label className="hidden md:flex items-center gap-2 rounded-md border border-zinc-200 px-2.5 py-1 text-zinc-500 hover:border-zinc-300 focus-within:border-zinc-400">
              <span aria-hidden>⌕</span>
              <input
                type="search"
                placeholder="Search…"
                className="w-48 bg-transparent text-[13px] outline-none placeholder:text-zinc-400 text-zinc-700"
              />
              <kbd className="rounded border border-zinc-200 bg-zinc-50 px-1 text-[10px] text-zinc-500">⌘K</kbd>
            </label>
            <button
              type="button"
              aria-label="Notifications"
              className="relative grid h-8 w-8 place-items-center rounded-md hover:bg-zinc-100"
            >
              <span aria-hidden>🔔</span>
              <span className="absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full bg-rose-500" />
            </button>
            <button
              type="button"
              className="h-8 w-8 rounded-full bg-gradient-to-br from-amber-300 to-rose-400 ring-1 ring-zinc-200"
              aria-label="Account"
            />
          </div>
        </div>

        <div className="flex items-center px-2">
          <nav
            aria-label="Sections"
            className="hidden md:flex items-center gap-0.5 text-[13px]"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                onClick={(e) => {
                  e.preventDefault();
                  setActive(item.label);
                }}
                aria-current={active === item.label ? "page" : undefined}
                className={`relative inline-flex items-center gap-2 px-3 py-2.5 ${
                  active === item.label
                    ? "text-zinc-900"
                    : "text-zinc-600 hover:text-zinc-900"
                }`}
              >
                {item.label}
                {item.badge && (
                  <span className="inline-flex h-4 min-w-4 items-center justify-center rounded bg-zinc-900 px-1 text-[10px] font-semibold text-white">
                    {item.badge}
                  </span>
                )}
                {active === item.label && (
                  <span
                    aria-hidden
                    className="absolute inset-x-3 -bottom-px h-0.5 bg-zinc-900"
                  />
                )}
              </a>
            ))}
          </nav>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="dash-mobile"
            className="md:hidden m-2 rounded-md border border-zinc-200 px-3 py-1.5 text-[13px]"
          >
            {open ? "Close" : `${active} ▾`}
          </button>

          <a
            href="#new"
            className="ml-auto mr-2 hidden md:inline-flex items-center gap-1 rounded-md bg-zinc-900 px-3 py-1.5 text-[12.5px] font-medium text-white hover:bg-zinc-800"
          >
            <span aria-hidden>＋</span> New invoice
          </a>
        </div>

        {open && (
          <nav
            id="dash-mobile"
            className="md:hidden border-t border-zinc-200 grid px-2 py-1.5"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                onClick={(e) => {
                  e.preventDefault();
                  setActive(item.label);
                  setOpen(false);
                }}
                className={`flex items-center justify-between rounded-md px-2 py-2 text-[14px] ${
                  active === item.label ? "bg-zinc-100" : "hover:bg-zinc-50"
                }`}
              >
                {item.label}
                {item.badge && (
                  <span className="rounded bg-zinc-900 px-1.5 text-[10px] text-white">
                    {item.badge}
                  </span>
                )}
              </a>
            ))}
          </nav>
        )}
      </header>

      <div data-nav-context className="px-5 py-8">
        <h1 className="text-[22px] font-semibold tracking-tight">
          Good afternoon, Elena.
        </h1>
        <p className="mt-1 text-[13px] text-zinc-500">
          Here's what's happening in your workspace today.
        </p>
      </div>
    </div>
  );
}
Dashboard Navbar

Good afternoon, Elena.
