// 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 PhoneInputFieldAddAddressModal: React.FC<PhoneInputFieldProps> = ({
  fieldName,
  value,
  onChange,
  placeholder = "Enter phone number",
  error,
  disabled = false,
}) => {
  return (
    <>
      <style>{`
        .phone-input-wrapper {
          position: relative;
          width: 100%;
        }

        .phone-input-wrapper label {
          position: absolute;
          top: -8px;
          left: 16px;
          background: #fff;
          padding: 0 5px;
          font-size: 12px;
          font-weight: 600;
          color: #6c757d;
          z-index: 3;
        }

        .phone-input-wrapper .react-tel-input {
          width: 100%;
        }

        .phone-input-wrapper .form-control {
          width: 100% !important;
          height: 45px !important;
          border-radius: 10px !important;
          border: 1px solid #ccc !important;
          font-size: 14px !important;
          box-sizing: border-box;
          padding: 10px 12px 10px 60px !important;
          background: #fff !important;
          color: #333 !important;
        }

        .phone-input-wrapper .flag-dropdown {
          border: none !important;
          background: transparent !important;
          position: absolute;
          left: 10px;
          top: 9px;
          z-index: 2;
        }

        .phone-input-wrapper .selected-flag {
          background: transparent !important;
          border: none !important;
          padding: 0 !important;
        }

        .phone-input-wrapper .country-list {
          border-radius: 10px !important;
          z-index: 9999 !important;
          box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .phone-input-wrapper .form-control:focus {
          border-color: #007bff !important;
          box-shadow: 0 0 0 2px rgba(0,123,255,0.2);
        }

        .phone-input-wrapper .form-control.error-input {
          border: 1px solid red !important;
        }

        .phone-input-wrapper .text-danger {
          font-size: 12px;
          margin-top: 4px;
        }
      `}</style>

      <div className="mb-3 phone-input-wrapper">
        <label>Phone No.</label>
        <PhoneInput
          country={"bh"}
          value={value}
          onChange={onChange}
          inputProps={{
            name: fieldName,
            autoFocus: false,
            placeholder,
          }}
          enableSearch
          disabled={disabled}
          inputClass={`form-control ${error ? "error-input" : ""}`}
          buttonClass="flag-dropdown"
        />
        {error && <div className="text-danger">{error}</div>}
      </div>
    </>
  );
};

export default PhoneInputFieldAddAddressModal;