/**
* EqualizationLegend Component
* Shows legend for equalization map colors
*/
'use client';
import React from 'react';
import { useTranslations } from 'next-intl';
import { useVisualizerStore } from '@/hooks/useVisualizerStore';
import { EQUALIZATION_COLORS } from '@/lib/visualizer/equalization';
export function EqualizationLegend() {
const t = useTranslations('equalization');
const { equalizationStep } = useVisualizerStore();
// Different legends for different steps
if (equalizationStep <= 2) {
// Introduction steps - no legend needed
return null;
}
if (equalizationStep <= 4) {
// Fiscal capacity steps
return (
<div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6">
<div className="flex items-center gap-2">
<div
className="w-4 h-4 rounded"
style={{ background: 'linear-gradient(to right, #93C5FD, #1D4ED8)' }}
/>
<span className="text-sm text-text-secondary">{t('legend.aboveAverage')}</span>
</div>
<div className="flex items-center gap-2">
<div
className="w-4 h-4 rounded"
style={{ backgroundColor: EQUALIZATION_COLORS.atAverage }}
/>
<span className="text-sm text-text-secondary">{t('legend.atAverage')}</span>
</div>
<div className="flex items-center gap-2">
<div
className="w-4 h-4 rounded"
style={{ background: 'linear-gradient(to right, #FDE68A, #D97706)' }}
/>
<span className="text-sm text-text-secondary">{t('legend.belowAverage')}</span>
</div>
<div className="flex items-center gap-2">
<div
className="w-4 h-4 rounded"
style={{ backgroundColor: EQUALIZATION_COLORS.territory }}
/>
<span className="text-sm text-text-secondary">{t('legend.territory')}</span>
</div>
</div>
);
}
// Steps 5-7: Receiving/Contributing
return (
<div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6">
<div className="flex items-center gap-2">
<div
className="w-4 h-4 rounded"
style={{ background: `linear-gradient(to right, ${EQUALIZATION_COLORS.receivingLight}, ${EQUALIZATION_COLORS.receivingDark})` }}
/>
<span className="text-sm text-text-secondary">{t('legend.receiving')}</span>
</div>
<div className="flex items-center gap-2">
<div
className="w-4 h-4 rounded"
style={{ backgroundColor: EQUALIZATION_COLORS.contributing }}
/>
<span className="text-sm text-text-secondary">{t('legend.contributing')}</span>
</div>
<div className="flex items-center gap-2">
<div
className="w-4 h-4 rounded"
style={{ backgroundColor: EQUALIZATION_COLORS.territory }}
/>
<span className="text-sm text-text-secondary">{t('legend.territory')}</span>
</div>
</div>
);
}
