"use client";

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

export function NavLink({
  href,
  match,
  children,
}: {
  href: string;
  match?: string[];
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const active = (match ?? [href]).some(
    (m) => pathname === m || pathname.startsWith(m + "/")
  );

  return (
    <Link
      href={href}
      className={cn(
        "flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13.5px] font-semibold transition-colors",
        active
          ? "bg-sidebar-accent text-sidebar-accent-foreground [&_svg]:opacity-100"
          : "text-sidebar-foreground hover:bg-secondary hover:text-foreground"
      )}
    >
      {children}
    </Link>
  );
}