import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { formatCount } from '@/lib/catalog';
import type { CatalogStatusChip } from '@/types/catalog';

interface StatusSelectProps {
    statuses: CatalogStatusChip[];
    active: string | null;
    onSelect: (status: string | null) => void;
}

/*
 * Status filter dropdown (IA §5.2). Chips are reserved for the brand
 * dimension (BrandTags); statuses use a compact select with live counts.
 * Options come from the backend statuses prop (only statuses present in the
 * data); values are passed through verbatim.
 */
export function StatusSelect({
    statuses,
    active,
    onSelect,
}: StatusSelectProps) {
    return (
        <Select
            value={active ?? 'all'}
            onValueChange={(value) => onSelect(value === 'all' ? null : value)}
        >
            <SelectTrigger size="sm" className="w-44 bg-white text-xs">
                <SelectValue placeholder="All statuses" />
            </SelectTrigger>
            <SelectContent>
                <SelectItem value="all">All statuses</SelectItem>
                {statuses.map(({ status, count }) => (
                    <SelectItem key={status} value={status}>
                        <span className="flex items-center justify-between gap-3">
                            {status}
                            <span className="text-[10px] text-muted-foreground">
                                {formatCount(count)}
                            </span>
                        </span>
                    </SelectItem>
                ))}
            </SelectContent>
        </Select>
    );
}