/**
 * HealthLegend - Color scale legend for health scores
 * 
 * Shows the color-to-health-score mapping for the heatmap.
 */

export default function HealthLegend() {
    const legendItems = [
        { range: '90-100', label: 'Excellent', color: 'bg-[var(--color-primary)]' },
        { range: '70-89', label: 'Good', color: 'bg-[var(--color-primary)]' },
        { range: '50-69', label: 'Fair', color: 'bg-yellow-500' },
        { range: '30-49', label: 'Needs Attention', color: 'bg-orange-500' },
        { range: '0-29', label: 'Critical', color: 'bg-red-600' },
    ];

    return (
        <div className="bg-[var(--color-bg-elevated)] rounded-lg shadow p-4">
            <h3 className="text-sm font-semibold text-[var(--color-text-secondary)] mb-3">
                Health Score Legend
            </h3>
            <div className="flex flex-wrap gap-3">
                {legendItems.map(item => (
                    <div key={item.range} className="flex items-center gap-2">
                        <div className={`w-6 h-6 rounded ${item.color}`} />
                        <div className="text-xs">
                            <div className="font-medium text-[var(--color-text-primary)]">
                                {item.range}
                            </div>
                            <div className="text-slate-600 dark:text-[var(--color-text-tertiary)]">
                                {item.label}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}
