import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Trophy } from "lucide-react"

interface MostPlayedByProps {
    distribution: Record<string, number>
}

export function MostPlayedByCard({ distribution }: MostPlayedByProps) {
    if (!distribution || Object.keys(distribution).length === 0) return null

    // Sort entries by count descending
    const sortedEntries = Object.entries(distribution).sort((a, b) => b[1] - a[1])

    return (
        <Card>
            <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-2">
                    <Trophy className="h-4 w-4" />
                    Most Played By
                </CardTitle>
            </CardHeader>
            <CardContent>
                <div className="flex flex-col gap-3">
                    {sortedEntries.map(([artist, count], index) => (
                        <div key={artist} className="flex items-center justify-between">
                            <div className="flex items-center gap-2">
                                <span className="font-medium text-sm">{artist}</span>
                            </div>
                            <span className="font-bold text-sm bg-secondary px-2 py-0.5 rounded-md min-w-[30px] text-center">
                                {count}
                            </span>
                        </div>
                    ))}
                </div>
            </CardContent>
        </Card>
    )
}