"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

export default function Nav() {
  const pathname = usePathname() ?? "/";
  const isUsers = pathname.startsWith("/users");
  const isAccounts = !isUsers;

  return (
    <header className="sticky top-0 z-10 border-b-2 border-zinc-900 bg-white/95 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
        <div className="hidden flex-col leading-none sm:flex">
          <span className="font-mono text-sm font-bold uppercase tracking-[0.2em] text-zinc-900">
            CM Bot V2
          </span>
          <span className="mt-0.5 font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500">
            // dashboard
          </span>
        </div>

        <nav className="flex items-center gap-2" aria-label="Primary">
          <NavLink href="/" active={isAccounts}>
            Accounts
          </NavLink>
          <NavLink href="/users" active={isUsers}>
            Users
          </NavLink>
        </nav>
      </div>
    </header>
  );
}

function NavLink({
  href,
  active,
  children,
}: {
  href: string;
  active: boolean;
  children: React.ReactNode;
}) {
  const base =
    "inline-flex items-center border-2 px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-[0.2em] transition-colors";
  const activeCls = "border-zinc-900 bg-yellow-300 text-zinc-900";
  const inactiveCls =
    "border-transparent text-zinc-700 hover:border-zinc-900 hover:bg-yellow-50 hover:text-zinc-900";
  return (
    <Link
      href={href}
      aria-current={active ? "page" : undefined}
      className={`${base} ${active ? activeCls : inactiveCls}`}
    >
      {children}
    </Link>
  );
}