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

/** A link in the navigation bar, marked when it's the current page. */
export function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
  const here = usePathname() === href;
  return (
    <Link
      href={href}
      aria-current={here ? "page" : undefined}
      className={cn(
        "rounded-md px-2.5 py-1.5 text-muted-foreground transition-colors hover:text-foreground",
        here && "bg-muted text-foreground",
      )}
    >
      {children}
    </Link>
  );
}