import { forwardRef, useEffect, useRef } from 'react';

const TextInput = forwardRef(({
    type = 'text',
    name,
    value,
    className = '',
    autoComplete,
    required,
    isFocused = false,
    handleChange,
    onChange,
    ...props
}, ref) => {
    const inputRef = ref || useRef();

    useEffect(() => {
        if (isFocused && inputRef.current) {
            inputRef.current.focus();
        }
    }, [isFocused]);

    const handleInputChange = (e) => {
        if (handleChange) {
            handleChange(e);
        }
        if (onChange) {
            onChange(e);
        }
    };

    return (
        <input
            type={type}
            name={name}
            value={value}
            className={`form-control ${className}`}
            ref={inputRef}
            autoComplete={autoComplete}
            required={required}
            onChange={handleInputChange}
            {...props}
        />
    );
});

export default TextInput;
