import React from 'react';
import { Field, ErrorMessage, FieldProps } from 'formik';
import MaskedInput from 'react-text-mask';

interface MaskedInputFieldProps {
    name: string;
    mask: (string | RegExp)[] | ((value: string) => (string | RegExp)[]);
    label: string;
    placeholder?: string;
    value?: string | number;
    error?: string;
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const MaskedInputField: React.FC<MaskedInputFieldProps> = ({
    name,
    mask,
    placeholder,
    onChange
}) => {
    return (
        <div className="">
            <Field
                name={name}
                data-testid="input-item"
                className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#ec9f46]"
            >
                {({ field }: FieldProps) => (
                    <MaskedInput
                        {...field}
                        mask={mask}
                        placeholder={placeholder}
                        className="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#ec9f46]"
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                            field.onChange(e); 
                            if (onChange) onChange(e);
                        }}
                    />
                )}
            </Field>
            <ErrorMessage name={name} component="div" className="text-red-500 text-xs" />
        </div>
    );
};

export default MaskedInputField;