import React from "react";
import ReactDOM from "react-dom";
import Button from "./Button";
import "./ErrorPopup.css";

const ErrorPopup = ({ show, message, onClose, onOk }) => {
  if (!show) return null;

  const popup = (
    <div className="error-popup-overlay" onClick={onClose}>
      <div
        className="error-popup-content"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="error-popup-body">
          <div className="error-popup-icon-container">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="error-popup-icon"
            >
              <path
                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </div>
          <h3 className="error-popup-title">Error</h3>
          <p className="error-popup-message">{message}</p>
          <Button variant="popup-ok" onClick={onOk || onClose}>
            OK
          </Button>
        </div>
      </div>
    </div>
  );

  return ReactDOM.createPortal(popup, document.body);
};

export default ErrorPopup;
