ERitors-Scribe-Desktop/components/form/SelectBox.tsx

import React, {ChangeEvent} from "react";
import {useTranslations} from '@/lib/i18n';

export interface SelectBoxProps {
    label: string;
    value: string;
}

type InputSize = 'sm' | 'md' | 'lg';
const sizeClasses: Record<InputSize, string> = {
    sm: 'px-3 py-1.5 text-xs rounded-lg',
    md: 'px-4 py-2.5 text-sm rounded-xl',
    lg: 'px-5 py-3 text-base rounded-xl',
};

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

export default function SelectBox(
    {
        onChangeCallBack,
        data,
        defaultValue,
        placeholder,
        disabled,
        size = 'md',
        translate = false
    }: SelectBoxFormProps) {
    const t = useTranslations();
    return (
        <select
            onChange={onChangeCallBack}
            disabled={disabled}
            key={defaultValue || 'placeholder'}
            defaultValue={defaultValue || '0'}
            className={`input-base ${sizeClasses[size]}`}
        >
            {placeholder && <option value={'0'}>{placeholder}</option>}
            {
                data.map((item: SelectBoxProps) => (
                    <option key={item.value} value={item.value} className="bg-tertiary text-text-primary">
                        {translate ? t(item.label) : item.label}
                    </option>
                ))
            }
        </select>
    )
}