"use client";

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

type NavItem = {
  label: string;
  href: string;
};

type NavLinksProps = {
  navItems: NavItem[];
};

function isActive(pathname: string, href: string) {
  return href === "/" ? pathname === "/" : pathname.startsWith(href);
}

export function NavLinks({ navItems }: NavLinksProps) {
  const pathname = usePathname();

  return (
    <nav className="hidden items-center gap-8 lg:flex" aria-label="Main navigation">
      {navItems.map((item) => {
        const active = isActive(pathname, item.href);

        return (
          <Link
            key={item.href}
            href={item.href}
            aria-current={active ? "page" : undefined}
            className={cn(
              "rounded-full px-1 text-xs font-semibold text-navy-muted transition hover:text-ev-deep xl:text-sm",
              active && "text-ev-deep underline decoration-ev decoration-2 underline-offset-8",
            )}
          >
            {item.label}
          </Link>
        );
      })}
    </nav>
  );
}