"use client";

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

/** Top-level navigation: plain keys in ink2, the current one in ink on the row lift. */
export function NavLinks({ links }: { links: { href: string; label: string }[] }) {
  const pathname = usePathname();
  return (
    <nav className="hidden items-center gap-1 sm:flex">
      {links.map((l) => {
        const active = l.href === "/" ? pathname === "/" : pathname.startsWith(l.href);
        return (
          <Link
            key={l.href}
            href={l.href}
            aria-current={active ? "page" : undefined}
            className={`flex h-8 items-center rounded-pill px-3 type-ui transition-colors focus-visible:focus-ring ${
              active ? "recipe-row-list-hover text-ink" : "text-ink2 hover:text-ink"
            }`}
          >
            {l.label}
          </Link>
        );
      })}
    </nav>
  );
}