"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { FlaskConical, GalleryVerticalEnd, LayoutGrid, Newspaper, Radar } from "lucide-react";

const LINKS = [
  { href: "/pipeline", label: "Pipeline", icon: LayoutGrid },
  { href: "/briefing", label: "Briefing", icon: Newspaper },
  { href: "/testbench", label: "Test Bench", icon: FlaskConical },
  { href: "/gallery", label: "Gallery", icon: GalleryVerticalEnd },
];

export default function TopNav() {
  const pathname = usePathname();

  return (
    <div
      className="w-full flex items-center justify-center border-b border-[var(--panel-border)] glass-panel shrink-0"
      style={{ height: "var(--topnav-h)" }}
    >
      <nav className="flex items-center gap-1 glass-pill rounded-full px-1.5 py-1">
        <Link
          href="/"
          className="flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-full text-[var(--muted)] hover:text-white transition"
        >
          <Radar size={13} className="text-[var(--accent-teal)]" /> LAYER
        </Link>
        <span className="w-px h-4 bg-[var(--panel-border)]" />
        {LINKS.map(({ href, label, icon: Icon }) => {
          const active = pathname === href || pathname.startsWith(`${href}/`);
          return (
            <Link
              key={href}
              href={href}
              className={`flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-full transition ${
                active
                  ? "bg-white/10 text-white"
                  : "text-[var(--muted)] hover:text-white"
              }`}
            >
              <Icon size={13} /> {label}
            </Link>
          );
        })}
      </nav>
    </div>
  );
}