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

export function NavLink({ href, label, symbol }: { href: string; label: string; symbol?: string }) {
  const pathname = usePathname();
  const active = pathname === href || (href !== "/" && pathname.startsWith(href));
  return (
    <Link
      href={href}
      className={`px-2.5 py-1.5 text-sm rounded-lg transition-colors flex items-center gap-1.5 whitespace-nowrap ${
        active
          ? "bg-gray-900 text-white font-semibold"
          : "text-gray-500 hover:text-gray-900 hover:bg-gray-100"
      }`}
    >
      {symbol && (
        <span className="text-[13px] leading-none" aria-hidden>
          {symbol}
        </span>
      )}
      <span>{label}</span>
    </Link>
  );
}