"use client";

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

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

export function NavLinks({
  items,
  className = "",
  onNavigate,
  vertical = false,
}: {
  items: Item[];
  className?: string;
  onNavigate?: () => void;
  vertical?: boolean;
}) {
  const pathname = usePathname();
  return (
    <ul className={className}>
      {items.map((item) => {
        const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
        return (
          <li key={item.href}>
            <Link
              href={item.href}
              onClick={onNavigate}
              aria-current={active ? "page" : undefined}
              className={
                vertical
                  ? `text-navy-900 hover:bg-navy-900/5 block rounded-md px-3 py-3 font-serif text-2xl ${
                      active ? "decoration-gold-500 underline underline-offset-8" : ""
                    }`
                  : `text-ink-700 hover:text-navy-900 after:bg-navy-900 relative block py-1 text-[0.85rem] whitespace-nowrap transition-colors after:absolute after:inset-x-0 after:-bottom-1 after:h-px after:origin-left after:scale-x-0 after:transition-transform after:duration-[var(--duration-base)] hover:after:scale-x-100 ${
                      active ? "text-navy-900 after:scale-x-100" : ""
                    }`
              }
            >
              {item.label}
            </Link>
          </li>
        );
      })}
    </ul>
  );
}