import { IconButton } from '@/components/common/IconButton';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { useI18n } from '@/hooks/use-i18n';
import { cn } from '@/lib/utils';

export type TableActiveFilterItem = {
    key: string;
    label: string;
    onRemove: () => void;
};

export interface TableActiveFiltersProps {
    items: TableActiveFilterItem[];
    onClearAll: () => void;
    heading?: string;
    clearAllLabel?: string;
    className?: string;
}

export function TableActiveFilters({
    items,
    onClearAll,
    heading,
    clearAllLabel,
    className,
}: TableActiveFiltersProps) {
    const { t } = useI18n();

    if (items.length === 0) {
        return null;
    }

    return (
        <div className={cn('flex flex-wrap items-center gap-2', className)}>
            <span className="text-xs text-muted-foreground">
                {heading ?? t('common.active_filters.heading')}
            </span>
            {items.map((item) => (
                <TableActiveFilterBadge key={item.key} label={item.label} onRemove={item.onRemove} />
            ))}
            <Button type="button" variant="ghost" size="sm" onClick={onClearAll}>
                {clearAllLabel ?? t('common.active_filters.clear_all')}
            </Button>
        </div>
    );
}

type TableActiveFilterBadgeProps = {
    label: string;
    onRemove: () => void;
};

function TableActiveFilterBadge({ label, onRemove }: TableActiveFilterBadgeProps) {
    const { t } = useI18n();

    return (
        <Badge variant="secondary" className="gap-1 pr-1">
            {label}
            <IconButton
                type="button"
                variant="text"
                color="ghost"
                size="xs"
                className="size-5"
                onClick={onRemove}
                icon="solar:close-circle-bold-duotone"
                aria-label={t('common.active_filters.remove', { label })}
            />
        </Badge>
    );
}