import React from "react";
import PropTypes from "prop-types";
import { FormHelperText } from "@mui/material";
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'

function PhoneNumberInput({ field, disabled, onChange, error, helperText }) {
  return (
    <div className="phone-number-input ">
      <PhoneInput
        country="us"
        value={field.ProValue || ""}
        onChange={phone => onChange(phone)}
        disabled={disabled}
        placeholder={field.Placeholder}
        id={`field-${field.Id}`}
        className={error ? 'phone-input-error' : ''}
      />
      {helperText && <FormHelperText error={error}>{helperText}</FormHelperText>}
    </div>
    
  );
}

export default PhoneNumberInput;

PhoneNumberInput.propTypes = {
  field: PropTypes.object.isRequired,
  disabled: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  error: PropTypes.bool,
  helperText: PropTypes.string,
};
