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

type DropDownOption = {
    id: string | number;
    name: string;
};

type DropDownProps = {
    labelTitle: string;
    options: DropDownOption[];
    value: string;
    onChange?: (value: string) => void;
    isDisabled?: boolean;
};

const MultipDropdown = ({
    labelTitle,
    options,
    value,
    onChange,
    isDisabled = false,
}: DropDownProps) => {
    return (
        <Select
            disabled={isDisabled}
            {...(value !== undefined ? { value } : {})}
            {...(onChange ? { onValueChange: onChange } : {})}
        >
            <SelectTrigger className="w-[180px]">
                <SelectValue placeholder={`Select a ${labelTitle}`} />
            </SelectTrigger>
            <SelectContent>
                <SelectGroup>
                    {options.map((singleOption) => (
                        <SelectItem
                            key={singleOption.id}
                            value={String(singleOption.id)}
                        >
                            {singleOption.name}
                        </SelectItem>
                    ))}
                </SelectGroup>
            </SelectContent>
        </Select>
    );
};

export default MultipDropdown;