import React from "react";

const ConfirmModal = ({
  type,
  onSubmit,
  onClose,
  message,
  loading,
  header,
  paramData,
  isOpen = false,
}) => {
  if (!isOpen) return null;

  const TypeofIcon = () => {
    if (type === "delete") {
      return (
        <i
          className="bx bx-x-circle text-danger"
          style={{ fontSize: "60px" }}
        ></i>
      );
    }
    return null;
  };

  const modalSize = type === "delete" ? "sm" : "md";

  return (
    <div
      className="modal fade show"
      style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}
      role="dialog"
      aria-modal="true"
    >
      <div className={`modal-dialog modal-${modalSize} modal-dialog-top`}>
        <div className="modal-content">
          <div className="modal-body py-1 px-2">
            <div className="d-flex justify-content-between mb-4 pt-2">
              {header && <strong className="mb-0">{header}</strong>}
              <button
                type="button"
                className="btn-close "
                aria-label="Close"
                onClick={onClose}
              />
            </div>

            <div className="row">
              <div className="col-4 col-sm-2">{TypeofIcon()}</div>
              <div className="col-8 col-sm-10 py-sm-2 py-1 text-sm-start">
                <span className="fs-6">{message}</span>
                <div className="d-flex justify-content-end mt-4">
                  <button
                    className="btn btn-primary btn-sm"
                    onClick={() => onSubmit(paramData)}
                    disabled={loading}
                  >
                    {loading ? "Please Wait..." : "Yes"}
                  </button>
                  <button
                    className="btn btn-secondary ms-4 btn-sm"
                    onClick={onClose}
                    disabled={loading}
                  >
                    No
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConfirmModal;