"use client";

import { useState } from "react";

const NAV = [
  { label: "Docs", href: "#docs", active: true },
  { label: "API Reference", href: "#api" },
  { label: "Guides", href: "#guides" },
  { label: "Examples", href: "#examples" },
];

const VERSIONS = ["v3.0 (latest)", "v2.x", "v1.x (legacy)"];

export function DocsNavbar() {
  const [open, setOpen] = useState(false);
  const [version, setVersion] = useState(VERSIONS[0]);
  const [versionOpen, setVersionOpen] = useState(false);

  return (
    <div className="bg-white text-zinc-900 antialiased font-sans">
      <header className="sticky top-0 z-40 border-b border-zinc-200 bg-white/80 backdrop-blur">
        <div className="mx-auto flex h-14 max-w-7xl items-center gap-4 px-5">
          <a
            href="#"
            className="flex items-center gap-2 text-[14.5px] font-semibold tracking-tight"
          >
            <span
              aria-hidden
              className="grid h-6 w-6 place-items-center rounded bg-zinc-900 text-white"
              style={{ fontFamily: "var(--font-geist-mono), monospace" }}
            >
              {"<"}
            </span>
            Vector
            <span className="rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-mono uppercase tracking-wider text-zinc-600">
              docs
            </span>
          </a>

          <div className="relative">
            <button
              type="button"
              onClick={() => setVersionOpen((v) => !v)}
              aria-expanded={versionOpen}
              aria-haspopup="listbox"
              className="hidden md:inline-flex items-center gap-1.5 rounded-md border border-zinc-200 px-2 py-1 text-[12px] font-mono text-zinc-600 hover:bg-zinc-50"
            >
              {version}
              <span aria-hidden>▾</span>
            </button>
            {versionOpen && (
              <ul
                role="listbox"
                className="absolute left-0 top-full mt-1 w-44 rounded-md border border-zinc-200 bg-white py-1 shadow-lg z-50"
              >
                {VERSIONS.map((v) => (
                  <li
                    role="option"
                    aria-selected={version === v}
                    key={v}
                  >
                    <button
                      type="button"
                      onClick={() => {
                        setVersion(v);
                        setVersionOpen(false);
                      }}
                      className={`w-full px-3 py-1.5 text-left text-[12.5px] font-mono hover:bg-zinc-50 ${
                        version === v ? "text-zinc-900" : "text-zinc-600"
                      }`}
                    >
                      {v}
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </div>

          <div className="hidden lg:flex flex-1 max-w-md">
            <label className="flex w-full items-center gap-2 rounded-md border border-zinc-200 bg-zinc-50/50 px-3 py-1.5 text-zinc-500 focus-within:border-zinc-400 focus-within:bg-white">
              <span aria-hidden>⌕</span>
              <input
                type="search"
                placeholder="Search documentation…"
                className="w-full bg-transparent text-[13px] outline-none placeholder:text-zinc-400 text-zinc-700"
              />
              <kbd className="rounded border border-zinc-200 bg-white px-1 text-[10px] text-zinc-500">⌘K</kbd>
            </label>
          </div>

          <nav
            aria-label="Primary"
            className="ml-auto hidden md:flex items-center gap-1 text-[13.5px]"
          >
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                aria-current={item.active ? "page" : undefined}
                className={`rounded-md px-2.5 py-1.5 ${
                  item.active
                    ? "text-zinc-900 bg-zinc-100"
                    : "text-zinc-600 hover:text-zinc-900 hover:bg-zinc-50"
                }`}
              >
                {item.label}
              </a>
            ))}
            <span aria-hidden className="mx-1 h-4 w-px bg-zinc-200" />
            <a
              href="https://github.com"
              className="inline-flex items-center gap-1.5 rounded-md border border-zinc-200 px-2.5 py-1 text-[12.5px] text-zinc-600 hover:bg-zinc-50"
            >
              <span aria-hidden>★</span>
              <span className="font-mono">14.2k</span>
            </a>
          </nav>

          <button
            type="button"
            onClick={() => setOpen((v) => !v)}
            aria-expanded={open}
            aria-controls="docs-mobile"
            className="md:hidden ml-auto grid h-9 w-9 place-items-center rounded-md hover:bg-zinc-100"
            aria-label="Toggle menu"
          >
            <span aria-hidden>{open ? "✕" : "☰"}</span>
          </button>
        </div>

        {open && (
          <div
            id="docs-mobile"
            className="md:hidden border-t border-zinc-200 px-5 py-3 grid gap-1"
          >
            <label className="flex items-center gap-2 rounded-md border border-zinc-200 px-3 py-2 mb-2">
              <span aria-hidden>⌕</span>
              <input
                type="search"
                placeholder="Search docs…"
                className="w-full bg-transparent text-[13px] outline-none"
              />
            </label>
            {NAV.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className={`rounded-md px-2 py-2 text-[14px] ${
                  item.active ? "bg-zinc-100" : "hover:bg-zinc-50"
                }`}
              >
                {item.label}
              </a>
            ))}
          </div>
        )}
      </header>

      <div data-nav-context className="mx-auto max-w-7xl px-5 py-8">
        <p className="text-[12px] font-mono uppercase tracking-wider text-zinc-500">
          Guides › Getting started
        </p>
        <h1 className="mt-2 text-[26px] font-semibold tracking-tight">
          Installation &amp; setup
        </h1>
      </div>
    </div>
  );
}
Docs Navbar

Installation & setup
