import React, {ChangeEvent} from "react";
import {SelectBoxProps} from "@/components/form/SelectBox";

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

export default function ToolbarSelect(
    {
        onChangeCallBack,
        data,
        defaultValue,
        placeholder,
        disabled
    }: ToolbarSelectProps): React.JSX.Element {
    return (
        <select
            onChange={onChangeCallBack}
            disabled={disabled}
            key={defaultValue || 'placeholder'}
            defaultValue={defaultValue || '0'}
            className="bg-transparent text-text-primary text-xs px-2 py-1.5 rounded-lg
                border border-transparent
                hover:bg-secondary hover:border-secondary
                focus:bg-secondary focus:border-primary focus:outline-none
                transition-all duration-200 cursor-pointer
                disabled:opacity-50 disabled:cursor-not-allowed"
        >
            {placeholder && <option value={'0'}>{placeholder}</option>}
            {data.map(function (item: SelectBoxProps): React.JSX.Element {
                return (
                    <option key={item.value} value={item.value} className="bg-tertiary text-text-primary">
                        {item.label}
                    </option>
                );
            })}
        </select>
    );
}