import {ChangeEvent} from "react";
import {SelectBoxProps} from "@/shared/interface";

export interface SelectBoxFormProps {
    onChangeCallBack: (event: ChangeEvent<HTMLSelectElement>) => void,
    data: SelectBoxProps[],
    defaultValue: string | null | undefined,
    placeholder?: string,
    disabled?: boolean
}

export default function SelectBox(
    {
        onChangeCallBack,
        data,
        defaultValue,
        placeholder,
        disabled
    }: SelectBoxFormProps) {
    return (
        <select
            onChange={onChangeCallBack}
            disabled={disabled}
            key={defaultValue || 'placeholder'}
            defaultValue={defaultValue || '0'}
            className={`w-full text-text-primary bg-secondary/50 hover:bg-secondary px-4 py-2.5 rounded-xl
                border border-secondary/50
                focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary
                hover:border-secondary
                outline-none transition-all duration-200 cursor-pointer
                ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
        >
            {placeholder && <option value={'0'}>{placeholder}</option>}
            {
                data.map((item: SelectBoxProps) => (
                    <option key={item.value} value={item.value} className="bg-tertiary text-text-primary">
                        {item.label}
                    </option>
                ))
            }
        </select>
    )
}