import { Badge } from "@/components/ui/badge"
import { CheckCircle, Clock, Ban } from "lucide-react"

interface ClaimStatusBadgeProps {
  status: 'unclaimed' | 'claim_pending' | 'claimed'
  className?: string
}

export function ClaimStatusBadge({ status, className = '' }: ClaimStatusBadgeProps) {
  const getStatusConfig = () => {
    switch (status) {
      case 'unclaimed':
        return {
          label: 'Available',
          icon: CheckCircle,
          className: 'bg-green-100 text-green-800 border-green-200 hover:bg-green-100'
        }
      case 'claim_pending':
        return {
          label: 'Claim Pending',
          icon: Clock,
          className: 'bg-yellow-100 text-yellow-800 border-yellow-200 hover:bg-yellow-100'
        }
      case 'claimed':
        return {
          label: 'Claimed',
          icon: Ban,
          className: 'bg-gray-100 text-gray-800 border-gray-200 hover:bg-gray-100'
        }
      default:
        return {
          label: status,
          icon: CheckCircle,
          className: 'bg-gray-100 text-gray-800 border-gray-200 hover:bg-gray-100'
        }
    }
  }

  const config = getStatusConfig()
  const Icon = config.icon

  return (
    <Badge className={`${config.className} ${className} flex items-center gap-1 w-fit`}>
      <Icon className="h-3 w-3" />
      {config.label}
    </Badge>
  )
}