import {
    Building2,
    CircleDollarSign,
    CircleHelp,
    KeyRound,
    MapPin,
    MessageCircle,
    ShieldCheck,
    Sparkles,
    Star,
    Target,
    Users,
    type LucideIcon,
} from 'lucide-react';

/**
 * Renders a review's per-category breakdown as a compact icon + score grid.
 * Used when the guest left only ratings (no free-text comment) — typical of
 * Booking.com reviews.
 */
const ICONS: Record<string, LucideIcon> = {
    cleanliness: Sparkles,
    communication: MessageCircle,
    location: MapPin,
    checkin: KeyRound,
    'check in': KeyRound,
    accuracy: Target,
    value: CircleDollarSign,
    'value for money': CircleDollarSign,
    facilities: Building2,
    staff: Users,
    overall: Star,
    'overall score': Star,
    'respect house rules': ShieldCheck,
};

function iconFor(label: string): LucideIcon {
    return ICONS[label.toLowerCase()] ?? CircleHelp;
}

export function ScoreGrid({ scores }: { scores: Record<string, number> }) {
    const entries = Object.entries(scores);
    if (entries.length === 0) {
        return <span className="text-xs text-gray-400">—</span>;
    }

    return (
        <div className="flex max-w-md flex-wrap gap-2">
            {entries.map(([label, value]) => {
                const Icon = iconFor(label);
                return (
                    <div
                        key={label}
                        className="bg-secondary/40 inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs"
                    >
                        <Icon className="h-3.5 w-3.5 text-yellow-600" />
                        <span className="text-gray-700">{label}</span>
                        <span className="font-semibold text-gray-900">{value.toFixed(1)}</span>
                    </div>
                );
            })}
        </div>
    );
}