import { useEffect, useRef } from 'react';
import { isValidPhoneNumber } from 'react-phone-number-input';

export default function InputPhone({ name, label, value, onChange, errorMsg, placeholder, className }) {
    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}</label>
                <div className={`flex items-center border-2 border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} hover:border-gray-400 focus-within:border-gray-500 h-8`}>
                    <input
                        type="tel"
                        name={name}
                        ref={inputRef}
                        className="flex-1 pl-2 block w-full sm:text-sm focus:ring-0 h-full 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>
        </>
    )
}