interface MenuItemProps {
  icon: string;
  label: string;
  active?: boolean;
  collapsed?: boolean;
  badge?: number;
  onClick?: () => void;
}

export default function SidebarMenuItem({ icon, label, active, collapsed, badge, onClick }: MenuItemProps) {
  return (
    <div
      onClick={onClick}
      className={`w-full flex items-center gap-3 py-3 px-4 cursor-pointer transition-all duration-200 relative whitespace-nowrap select-none
        ${active ? 'bg-[rgba(0,194,168,0.15)] text-white' : 'text-white/80 hover:bg-[rgba(255,255,255,0.08)]'}`}
      style={active ? { borderLeft: '4px solid #00C2A8' } : { borderLeft: '4px solid transparent' }}
    >
      {!collapsed && badge && badge > 0 ? (
        <span className="bg-[#F5A623] text-[#1B1D3A] text-xs font-bold px-1.5 py-0.5 rounded-full min-w-[20px] text-center leading-tight">
          {badge}
        </span>
      ) : null}
      {!collapsed && (
        <span className="text-[15px] font-medium flex-1 text-right">{label}</span>
      )}
      <div className="w-6 h-6 flex items-center justify-center flex-shrink-0">
        <i className={`${icon} text-xl ${active ? 'text-white' : 'text-[#8B94EC]'}`}></i>
      </div>
    </div>
  );
}