import Input, { PhoneInputProps } from 'react-phone-input-2';
import cn from '@/lib/merge-clsx';
import 'react-phone-input-2/lib/high-res.css';
import styles from './style.module.css';

interface IPhoneInputProps extends PhoneInputProps {
  label: string;
  name: string;
  isInValid: boolean;
}
const PhoneInput: React.FC<IPhoneInputProps> = ({ label, name, ...props }) => {
  return (
    <div>
      <label
        htmlFor={name}
        className={cn(styles.label, {
          [styles.labelInvalid]: props.isInValid
        })}>
        {label}
      </label>
      <Input
        {...props}
        containerClass={cn(
          styles.container,
          props.isInValid && styles.containerInvalid
        )}
        inputClass={styles.input}
        buttonClass={styles.button}
        dropdownClass={styles.dropdown}
        searchClass={styles.search}
      />
    </div>
  );
};

export default PhoneInput;
