'use client'

import { Badge } from '@/components/ui/badge'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { LABEL_COLORS } from '@/lib/types'
import { useLabels } from '@/context/LabelContext'

interface LabelBadgeProps {
  label: string
  onRemove?: () => void
  variant?: 'default' | 'filter' | 'clickable'
  onClick?: () => void
  isSelected?: boolean
  isDisabled?: boolean
}

export function LabelBadge({
  label,
  onRemove,
  variant = 'default',
  onClick,
  isSelected = false,
  isDisabled = false,
}: LabelBadgeProps) {
  const { getLabelColor } = useLabels()
  const colorName = getLabelColor(label)
  const colorClasses = LABEL_COLORS[colorName] || LABEL_COLORS.gray

  return (
    <Badge
      className={cn(
        'text-xs border gap-1',
        colorClasses.bg,
        colorClasses.text,
        colorClasses.border,
        variant === 'filter' && 'cursor-pointer hover:opacity-80',
        variant === 'clickable' && 'cursor-pointer',
        isDisabled && 'opacity-50',
        isSelected && 'ring-2 ring-blue-500'
      )}
      onClick={onClick}
    >
      {label}
      {onRemove && (
        <button
          onClick={(e) => {
            e.stopPropagation()
            onRemove()
          }}
          className="hover:text-red-600"
        >
          <X className="h-3 w-3" />
        </button>
      )}
    </Badge>
  )
}