/**
* EqualizationInlineLegend Component
* Compact inline legend that shows below the map, contextual to current step
*/
'use client';
import React, { useMemo } from 'react';
import { useLocale } from 'next-intl';
import { useVisualizerStore } from '@/hooks/useVisualizerStore';
interface LegendItem {
color: string;
label: string;
}
export function EqualizationInlineLegend() {
const locale = useLocale() as 'en' | 'fr';
const { equalizationStep } = useVisualizerStore();
// Get step-contextual legend (colors match equalizationColors.ts)
const legendItems = useMemo((): LegendItem[] => {
switch (equalizationStep) {
case 1:
case 2:
// Introduction steps - all provinces show neutral color
return [
{ color: '#94A3B8', label: locale === 'en' ? 'All provinces' : 'Toutes les provinces' },
{ color: '#9CA3AF', label: locale === 'en' ? 'Territories (TFF)' : 'Territoires (FFT)' },
];
case 3:
case 4:
// Fiscal capacity steps - show capacity gradient
return [
{ color: '#1D4ED8', label: locale === 'en' ? 'Above avg (>105%)' : 'Au-dessus (>105%)' },
{ color: '#6B7280', label: locale === 'en' ? 'At average (95-105%)' : 'À la moyenne (95-105%)' },
{ color: '#D97706', label: locale === 'en' ? 'Below avg (<95%)' : 'Sous moyenne (<95%)' },
{ color: '#9CA3AF', label: locale === 'en' ? 'Territories (TFF)' : 'Territoires (FFT)' },
];
case 5:
case 6:
case 7:
// Payment steps - show receiving/contributing status
return [
{ color: '#059669', label: locale === 'en' ? 'Receives equalization' : 'Reçoit péréquation' },
{ color: '#6B7280', label: locale === 'en' ? 'Above standard' : 'Au-dessus de la norme' },
{ color: '#9CA3AF', label: locale === 'en' ? 'Territories (TFF)' : 'Territoires (FFT)' },
];
default:
return [];
}
}, [equalizationStep, locale]);
return (
<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
{legendItems.map((item, i) => (
<div key={i} className="flex items-center gap-2">
<div
className="w-4 h-4 rounded-sm flex-shrink-0"
style={{ backgroundColor: item.color }}
/>
<span className="text-sm text-text-secondary whitespace-nowrap">{item.label}</span>
</div>
))}
</div>
);
}
