import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@admin/components/ui/select';

interface Option {
    label: string;
    value: string;
}

const STATUS_OPTIONS: Option[] = [
    { label: 'Active', value: 'active' },
    { label: 'Inactive', value: 'inactive' },
    { label: 'Pending', value: 'pending' },
];

interface AppDropdownFilterProps {
    value: string;
    onChange: (val: string) => void;
    options?: Option[];
    placeholder?: string;
}

export default function AppDropdownFilter({ value, onChange, options = STATUS_OPTIONS, placeholder = 'All' }: AppDropdownFilterProps) {
    return (
        <Select value={value || 'all'} onValueChange={(val) => onChange(val === 'all' ? '' : val)}>
            <SelectTrigger>
                <SelectValue placeholder={placeholder} />
            </SelectTrigger>
            <SelectContent>
                {/* Use a sentinel value "all" instead of empty string */}
                <SelectItem value="all">{placeholder}</SelectItem>
                {options.map((opt) => (
                    <SelectItem key={opt.value} value={opt.value}>
                        {opt.label}
                    </SelectItem>
                ))}
            </SelectContent>
        </Select>
    );
}