import TextInput from '@/Components/TextInput';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/Components/ui/select';
import { capitalize } from '@/lib/utils';

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

export default function SelectInput({
    options,
    className,
    onChange,
    value,
    readOnly = false,
    ...props
}: {
    options: Option[];
    className?: string;
    value?: string | number | null;
    onChange?: (value: string) => void;
    readOnly?: boolean;
    disabled?: boolean;
}) {
    const stringValue = value != null ? String(value) : undefined;
    const items = options.map((option) => (
        <SelectItem
            key={option.value}
            className="text-zinc-500"
            value={String(option.value)}
        >
            {capitalize(option.label)}
        </SelectItem>
    ));

    if (readOnly) {
        const label =
            options.find((option) => String(option.value) === stringValue)
                ?.label || '';
        return <TextInput readOnly={readOnly} value={capitalize(label)} />;
    }
    return (
        <Select onValueChange={onChange} value={stringValue}>
            <SelectTrigger className={className} {...props}>
                <SelectValue />
            </SelectTrigger>
            <SelectContent>{items}</SelectContent>
        </Select>
    );
}