import Image from "next/image";

interface NavItemProps {
  icon: string;
  label: string;
  isActive: boolean;
  onClick: () => void;
}

export default function NavItem({ icon, label, isActive, onClick }: NavItemProps) {
  return (
    <button
      onClick={onClick}
      className={`
        rounded-xl
        pl-4
        flex
        items-center
        gap-2
        h-[42px]
        w-full
        overflow-hidden
        transition-colors
        ${isActive
          ? 'bg-fill-secondary-click'
          : 'hover:bg-gray-50'
        }
      `}
    >
      <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 font-bold'
            : 'text-text-tertiary font-medium'
          }
        `}
      >
        {label}
      </span>
    </button>
  );
}