const ConfirmationModal = ({
  open,
  title,
  message,
  confirmText = "Confirm",
  cancelText = "Cancel",
  loading = false,
  onConfirm,
  onCancel
}) => {
  if (!open) {
    return null;
  }

  const handleBackdropClick = (
    event
  ) => {
    if (
      event.target ===
        event.currentTarget &&
      !loading
    ) {
      onCancel();
    }
  };

  return (
    <div
      className="system-modal-backdrop"
      role="presentation"
      onMouseDown={
        handleBackdropClick
      }
    >
      <div
        className="system-modal"
        role="dialog"
        aria-modal="true"
        aria-labelledby="system-modal-title"
      >
        <div className="system-modal__icon">
          !
        </div>

        <div className="system-modal__content">
          <h3 id="system-modal-title">
            {title}
          </h3>

          <p>
            {message}
          </p>
        </div>

        <div className="system-modal__actions">
          <button
            type="button"
            className="secondary-button"
            onClick={onCancel}
            disabled={loading}
          >
            {cancelText}
          </button>

          <button
            type="button"
            className="primary-button system-modal__confirm"
            onClick={onConfirm}
            disabled={loading}
          >
            {loading
              ? "Submitting..."
              : confirmText}
          </button>
        </div>
      </div>
    </div>
  );
};

export default ConfirmationModal;