"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useNavbarData } from "@/lib/navigation/NavbarConfig";
import { cn } from "@/lib/utils";

export default function Navbar() {
  const pathname = usePathname();
  const menus = useNavbarData();

  return (
    <header className="sticky top-0 z-30 flex min-h-14 items-center gap-4 border-b border-emerald-950/10 bg-emerald-950 px-5 text-white shadow-lg shadow-emerald-950/10">
      <strong className="mr-2 text-[15px] font-black tracking-tight">农业数据标准化平台</strong>
      <nav className="flex items-center gap-2">
        {menus.map((menu) => {
          const active = pathname === menu.matchPath || pathname.startsWith(`${menu.matchPath}/`);
          return (
            <Link
              key={menu.matchPath}
              href={menu.url}
              className={cn(
                "rounded-xl px-4 py-2 text-sm font-bold text-white/82 transition hover:bg-white/12 hover:text-white",
                active && "bg-emerald-500/25 text-white shadow-inner shadow-white/10"
              )}
            >
              {menu.title}
            </Link>
          );
        })}
      </nav>
    </header>
  );
}
