"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { NAV } from "@/lib/nav";

export function AppNav() {
  const pathname = usePathname();

  return (
    <nav
      className="sticky top-0 z-30 flex items-center justify-between h-14 px-6"
      style={{
        background: "var(--bg-card)",
        color: "var(--text)",
        borderBottom: "1px solid var(--border)",
      }}
    >
      <div className="flex items-center gap-8">
        <span
          className="text-sm font-bold tracking-tight"
          style={{ fontFamily: "var(--font-display)" }}
        >
          Personal Dashboard
        </span>
        <div className="flex gap-6">
          {NAV.map((a) => {
            const active =
              a.href === "/" ? pathname === "/" : pathname.startsWith(a.href);
            return (
              <Link
                key={a.href}
                href={a.href}
                className="text-xs uppercase tracking-widest"
                style={{
                  fontFamily: "var(--font-display)",
                  color: active ? "var(--text)" : "var(--text-muted)",
                }}
              >
                {a.label}
              </Link>
            );
          })}
        </div>
      </div>
    </nav>
  );
}