import React from "react";

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

  const TypeofIcon = () => {
    switch (type) {
      case "delete":
        return <i className="bx bx-x-circle text-danger" style={{ fontSize: "60px" }}></i>;
      case "success":
        return <i className="bx bx-check-circle text-success" style={{ fontSize: "60px" }}></i>;
      case "warning":
        return <i className="bx bx-error-circle text-warning" style={{ fontSize: "60px" }}></i>;
      default:
        return null;
    }
  };

  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-sm 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-3 d-flex justify-content-center align-items-start">
                {TypeofIcon()}
              </div>
              <div className="col-8 col-sm-9 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-3 btn-sm"
                    onClick={onClose}
                    disabled={loading}
                  >
                    No
                  </button>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  );
};

export default ConfirmModal;