"use client";

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

type NavItemProps = {
  item: {
    label: string;
    href: string;
  };
};

export const NavItem: React.FC<NavItemProps> = ({ item: { label, href } }) => {
  const pathname = usePathname();

  const isActive = (path: string) => {
    if (path === "/") return pathname === "/";
    return pathname.startsWith(path);
  };

  const active = isActive(href);

  return (
    <li key={href}>
      <Link
        href={href}
        className={`hover:text-yellow-500 transition-colors ${active ? "text-gray-100 font-bold" : ""}`}
      >
        {label}
      </Link>
    </li>
  );
};