import { Badge as BadgeIcon } from "lucide-react"
import { Card } from "@/components/ui/card"

interface Badge {
    id: number
    name: string
    description: string
    icon: string
    slug: string
}

interface BadgeListProps {
    badges: Badge[]
}

export function BadgeList({ badges }: BadgeListProps) {
    if (!badges || badges.length === 0) {
        return (
            <div className="text-center py-8 text-muted-foreground">
                <p>No badges earned yet. Go attend some shows!</p>
            </div>
        )
    }

    return (
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {badges.map((badge) => (
                <Card key={badge.id} className="flex flex-col items-center p-4 bg-muted/20 text-center gap-2 transition-all hover:bg-muted/40">
                    <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
                        {/* We could dynamically map icons here based on badge.icon string */}
                        <BadgeIcon className="h-6 w-6 text-primary" />
                    </div>
                    <div>
                        <p className="font-semibold text-sm">{badge.name}</p>
                        <p className="text-xs text-muted-foreground line-clamp-2" title={badge.description}>
                            {badge.description}
                        </p>
                    </div>
                </Card>
            ))}
        </div>
    )
}