import React from 'react';
import { PhoneInput } from 'react-international-phone';
import 'react-international-phone/style.css';

export default function InputPhone({
  name,
  label,
  value,
  onChange,
  errorMsg,
  className,
  required,
  enable = true, // Par défaut, le champ est activé
}) {
  const handlePhoneChange = (phone) => {
    if (enable && onChange) {
      if (phone && phone.target) {
        const { name, value } = phone.target;
        onChange({ target: { name: name, value: value } });
      } else if (phone) {
        onChange({ target: { name: name, value: phone } });
      }
    }
  };

  return (
    <div className={`${className}`}>
      <label htmlFor={name} className="block text-sm font-medium text-gray-700">
        {label}
        {required && <span className="text-red-500 ml-1">*</span>}
      </label>

      <PhoneInput
        defaultCountry="fr"
        value={value}
        onChange={handlePhoneChange}
        inputProps={{
          name: name,
          required: required,
          disabled: !enable, // Désactiver l'input si enable est false
        }}
        className={`!w-full mt-1 !h-[38px] ${
          !enable ? 'bg-gray-100 cursor-not-allowed' : ''
        }`}
        containerClassName={`!w-full !h-[36px] !flex !items-center !rounded-md ${
          !enable ? 'bg-gray-100 cursor-not-allowed' : ''
        }`}
        inputClassName={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none !rounded-r-md items-center !border !border-gray-200 rounded-md ${
          errorMsg ? 'border-red-500' : ''
        } ${!enable ? 'bg-gray-100 cursor-not-allowed' : 'hover:border-gray-400 focus-within:border-gray-500'}`}
        buttonClassName={`!h-[38px] !flex !items-center !justify-center !rounded-l-md !border border-gray-200 !border-r-0 ${
          !enable ? 'cursor-not-allowed' : ''
        }`}
      />

      {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
    </div>
  );
}