import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faXmark } from '@fortawesome/pro-duotone-svg-icons';
import { cx } from '@/utils/cx';

type FilterPill = {
    key: string;
    label: string;
    value: string;
};

interface FilterPillsProps {
    filters: FilterPill[];
    onRemove: (key: string) => void;
    onClearAll: () => void;
}

export const FilterPills = ({ filters, onRemove, onClearAll }: FilterPillsProps) => {
    if (filters.length === 0) return null;

    return (
        <div className="flex flex-wrap items-center gap-2">
            {filters.map((filter) => (
                <span
                    key={filter.key}
                    className={cx(
                        'flex items-center gap-1 rounded-full border border-brand bg-brand-primary px-3 py-1 text-xs font-medium text-brand-secondary',
                    )}
                >
                    {filter.label}: {filter.value}
                    <button
                        type="button"
                        onClick={() => onRemove(filter.key)}
                        className="ml-0.5 cursor-pointer rounded-full p-0.5 transition duration-100 ease-linear hover:bg-brand-secondary hover:text-white"
                        aria-label={`Remove ${filter.label} filter`}
                    >
                        <FontAwesomeIcon icon={faXmark} className="size-3" />
                    </button>
                </span>
            ))}
            <button
                type="button"
                onClick={onClearAll}
                className="ml-2 cursor-pointer border-none bg-transparent text-xs text-quaternary transition duration-100 ease-linear hover:text-error-primary"
            >
                Clear all
            </button>
        </div>
    );
};
