"use client";

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

interface NavItemProps {
  icon: string;
  label: string;
  href: string;
}

export default function NavItem({ icon, label, href }: NavItemProps) {
  const pathname = usePathname();
  const isActive = pathname === href;

  return (
    <Link
      href={href}
      className={`
        rounded-xl
        pl-4
        flex
        items-center
        gap-2
        h-[42px]
        w-full
        overflow-hidden
        transition-colors
        ${isActive
          ? 'bg-fill-secondary-click dark:bg-gray-700'
          : 'hover:bg-gray-50 dark:hover:bg-gray-700'
        }
      `}
    >
      <div className="w-[22px] h-[22px] flex-shrink-0 relative">
        <Image
          src={icon}
          alt={label}
          width={22}
          height={22}
          className="w-full h-full"
        />
      </div>
      <span
        className={`
          text-sm
          leading-[150%]
          ${isActive
            ? 'text-text-primary dark:text-white font-bold'
            : 'text-text-tertiary dark:text-gray-400 font-medium'
          }
        `}
      >
        {label}
      </span>
    </Link>
  );
}