import { Inputs } from '../../index';

enum TaxId {
    'J',
    'V',
    'E',
    'G',
}
const taxIdType = ['J', 'V', 'E', 'G'];

export default function TaxIdInput({
    label,
    name,
    className,
    required,
    selectName,
    onChange,
    onChangeSelect,
    ...props
}: Inputs.Id) {
    return (
        <div>
            {label && (
                <Inputs.Label
                    name={label as string}
                    htmlFor={name}
                    required={required}
                />
            )}
            <div className='grid grid-cols-3'>
                <Inputs.Select
                    name={selectName}
                    Enum={TaxId}
                    options={taxIdType}
                    value={0}
                    className={`input w-full ${className}`}
                    onChange={onChangeSelect}
                    required
                />
                <div className='col-span-2'>
                    <Inputs.Text
                        name={name}
                        className={`input w-full ${className}`}
                        required={required}
                        onChange={onChange}
                        {...props}
                    />
                </div>
            </div>
        </div>
    );
}