// components/TextField/PhoneInputField.tsx
import React from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";

interface PhoneInputFieldProps {
  fieldName: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  error?: string;
  disabled?: boolean;
}

const PhoneInputFieldNew: React.FC<PhoneInputFieldProps> = ({
  fieldName,
  value,
  onChange,
  placeholder,
  error,
  disabled = false
}) => {
  return (
    <div className="mb-3 phone-input-field-div">
      <PhoneInput
        country={"bh"} // default Bahrain (you can make it dynamic)
        value={value}
        onChange={onChange}
        inputProps={{
          name: fieldName,
          required: true,
          autoFocus: false,
          placeholder,
        }}
        inputStyle={{
          width: "100%",
          borderRadius: "8px",
          border: error ? "1px solid red" : "1px solid #ccc",
          padding: "10px 12px",
        }}
        buttonStyle={{
          border: error ? "1px solid red" : "1px solid #ccc",
        }}
        disabled={disabled}
        // countryCodeEditable
        inputClass="phone-input-field-input"
      />
      {error && <div className="text-danger mt-1">{error}</div>}
    </div>
  );
};

export default PhoneInputFieldNew;