import { Interpolation, Theme } from "@emotion/react";
import { FC } from "react";
import { PhoneInput } from "react-international-phone";
// import "react-international-phone/style.css";
interface mobileProps {
  onChange: (value: string) => void;
  value: string | undefined; 
  style: Interpolation<Theme>;
  required?: boolean;
  disabled?: boolean;
  title?:string
}
const MobileInput: FC<mobileProps> = ({ onChange, value , style,disabled }) => {
  return (
    <div style={{}}>
    <PhoneInput
      defaultCountry="in"
      disabled={disabled}
      css={style}
       style={{border:"1px solid #9CA3AF",borderRadius:"5px",background:"#F4F6F8",backgroundColor:"#F4F6F8"}}
      inputStyle={{ width: "100%",background:"#F4F6F8",backgroundColor:"#F4F6F8" }}
      value={value}
      onChange={(phone: string) => onChange(phone)}
      hideDropdown
    />
    </div>
  );
};
export default MobileInput;
