import React from 'react';
import PhoneInput, {CountryData} from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';
import '../../Auth/react-phone-input-2-custom.css';

interface PhoneInputProps {
    value: string;
    onChange?(
        value: string,
        data: CountryData | {},
        event: React.ChangeEvent<HTMLInputElement>,
        formattedValue: string
    ): void;
}

const PhoneInputComponent: React.FC<PhoneInputProps> = ({ value, onChange }) => {
    return (
        <PhoneInput
            country={'pl'}
            value={value}
            onChange={onChange}
            inputProps={{
                name: 'phone',
                required: true,
            }}
            containerClass="react-tel-input"
        />
    );
};

export default PhoneInputComponent;
