"use client";

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

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

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

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

  const active = isActive(href);
  const label = t(labelKey);

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