import { Label } from '@/components/ui/label';
import { X } from 'lucide-react';
import * as React from 'react';

/**
 * Filtre avec son « × » de retrait — patron repris de fond-de-caisse : l'utilisateur
 * enlève un filtre sans réinitialiser toute la barre.
 *
 * Sorti de `index.tsx` pour servir aussi le champ « Au » du sélecteur de
 * période : vider « Au », c'est revenir au mois seul, le même geste qu'ôter un
 * filtre. `titre` nomme ce que fait la croix quand « Retirer ce filtre » ne le
 * dit pas assez.
 */
export function FilterLabel({
    children,
    active,
    onClear,
    titre = 'Retirer ce filtre',
}: {
    children: React.ReactNode;
    active: boolean;
    onClear: () => void;
    titre?: string;
}) {
    return (
        <div className="flex items-center gap-1">
            <Label className="text-xs">{children}</Label>
            {active && (
                <button
                    type="button"
                    onClick={onClear}
                    title={titre}
                    aria-label={titre}
                    className="text-muted-foreground flex h-3.5 w-3.5 items-center justify-center rounded-full transition-colors hover:bg-red-100 hover:text-red-600"
                >
                    <X className="h-2.5 w-2.5" />
                </button>
            )}
        </div>
    );
}