'use client'

import Link from 'next/link'
import { cn } from '@/lib/utils'

export type BadgeType = 'red' | 'blue' | 'green'

export interface SidebarItemProps {
  label: string
  href: string
  icon: React.ReactNode
  active?: boolean
  badge?: {
    type: BadgeType
    value: string | number
  }
  onClick?: () => void
}

const badgeStyles: Record<BadgeType, string> = {
  red: 'bg-red-500/90 text-white',
  blue: 'bg-blue-500/90 text-white',
  green: 'bg-emerald-500/90 text-white',
}

export default function SidebarItem({
  label,
  href,
  icon,
  active,
  badge,
  onClick,
}: SidebarItemProps) {
  const isPill = badge?.type === 'green' && typeof badge.value === 'string'

  return (
    <Link
      href={href}
      onClick={onClick}
      className={cn(
        'flex items-center gap-3 rounded-lg px-4 py-2.5 transition-all duration-200',
        active
          ? 'bg-gradient-to-r from-cyan-600/30 to-blue-600/20 text-white shadow-[0_0_20px_-5px_rgba(6,182,212,0.25)]'
          : 'text-slate-400 hover:bg-slate-700/50 hover:text-slate-200'
      )}
    >
      <span
        className={cn(
          'flex shrink-0',
          active ? 'text-cyan-300' : 'text-slate-500'
        )}
      >
        {icon}
      </span>
      <span className="min-w-0 flex-1 truncate">{label}</span>
      {badge != null && (
        <span
          className={cn(
            'flex shrink-0 items-center justify-center text-xs font-bold',
            isPill ? 'rounded-full px-2 py-0.5' : 'h-5 min-w-[1.25rem] rounded-full px-1.5',
            badgeStyles[badge.type]
          )}
        >
          {badge.value}
        </span>
      )}
    </Link>
  )
}