import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';

/**
 * Les quatre couleurs que le manager pose dans le fichier des paiements.
 *
 * Les teintes sont EXACTEMENT celles écrites dans le fichier (contrat) : la
 * comptabilité doit reconnaître à l'écran ce qu'elle voit dans ses onglets.
 */
export function LegendeCouleurs({ className }: { className?: string }) {
    const { t } = useTranslation();

    const couleurs = [
        { classe: 'bg-[#40E0D0]', libelle: t('retenue', 'fichier_couleur_turquoise', 'Envoyée, en attente de la DGI') },
        { classe: 'bg-[#FFFF00]', libelle: t('retenue', 'fichier_couleur_jaune', 'Acceptée par la DGI') },
        { classe: 'bg-[#F4CCCC]', libelle: t('retenue', 'fichier_couleur_rouge', 'Refusée — à corriger ici, puis renvoyer') },
        { classe: 'bg-white', libelle: t('retenue', 'fichier_couleur_blanc', 'À déclarer') },
    ];

    return (
        <div className={cn('flex flex-col gap-1.5', className)}>
            <span className="text-muted-foreground text-xs font-medium">
                {t('retenue', 'fichier_couleurs_titre', 'Couleurs posées dans le fichier des paiements')}
            </span>
            <ul className="grid grid-cols-1 gap-x-4 gap-y-1 text-xs sm:grid-cols-2">
                {couleurs.map((c) => (
                    <li key={c.classe} className="flex items-center gap-2">
                        <span aria-hidden className={cn('h-3.5 w-5 shrink-0 rounded-sm border border-black/15', c.classe)} />
                        <span>{c.libelle}</span>
                    </li>
                ))}
            </ul>
        </div>
    );
}