"use client";

/**
 * NavLink — primary-nav link with an active-page indicator.
 *
 * Reads usePathname to decide whether this link points at the active route,
 * then renders a visible gold underline plus a brighter text colour and
 * sets `aria-current="page"` for screen readers. A link counts as active for
 * its exact path AND for descendant paths (e.g. /sightings is active when
 * on /sightings/EV-1947-…), so deep pages still highlight their section.
 */
import Link from "next/link";
import { usePathname } from "next/navigation";

export function NavLink({ href, label }: { href: string; label: string }) {
  const pathname = usePathname() || "/";
  const isActive =
    pathname === href || (href !== "/" && pathname.startsWith(`${href}/`));

  return (
    <Link
      href={href}
      aria-current={isActive ? "page" : undefined}
      className={
        isActive
          ? "px-2.5 py-1.5 rounded text-[#e0c080] bg-[rgba(224,192,128,0.10)] border-b-2 border-[#e0c080] -mb-[2px] transition-colors"
          : "px-2.5 py-1.5 rounded text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.06)] border-b-2 border-transparent -mb-[2px] transition-colors"
      }
    >
      {label}
    </Link>
  );
}