import { LucideIcon } from "lucide-react"
import { Badge } from "@/components/ui/badge"

interface EmptyStateBadgeProps {
  icon: LucideIcon
  text: string
  description?: string
}

export function EmptyStateBadge({ icon: Icon, text, description }: EmptyStateBadgeProps) {
  return (
    <div className="text-center space-y-6">
      <div className="inline-flex items-center justify-center">
        <Badge 
          variant="outline" 
          className="px-8 py-6 text-base font-light border-2 border-primary/20 bg-primary/5 hover:bg-primary/10 transition-colors"
        >
          <Icon className="h-6 w-6 mr-3 text-primary/80" strokeWidth={1.5} />
          <span className="text-foreground tracking-wide">{text}</span>
        </Badge>
      </div>
      {description && (
        <p className="text-sm text-muted-foreground font-light max-w-md mx-auto">
          {description}
        </p>
      )}
    </div>
  )
}