import { useEffect, useRef } from 'react';


export default function InputPhone({ name, label, value, onChange, errorMsg, placeholder, className, required }) {
    const inputRef = useRef(null);

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

    const handleChange = (e) => {
        const newValue = e.target.value;
        onChange(newValue);
    };

    return (
        <>
            <div className={`mb-4 ${className}`}>
                <label htmlFor={name} className="block text-sm font-medium text-gray-700">
                    {label}
                    {required && <span className="text-red-500 ml-1">*</span>}
                </label>
                <div className={`mt-1 flex items-center border border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} hover:border-gray-400 focus-within:border-gray-500`}>
                    <input
                        type="tel"
                        name={name}
                        ref={inputRef}
                        className="flex-1 px-3 py-2 block w-full sm:text-sm focus:ring-0 rounded-md border-none outline-none"
                        value={typeof value === 'string' ? value : ''}
                        onChange={handleChange}
                        placeholder={placeholder}
                    />
                </div>
                {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
            </div>
        </>
    )
}
