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

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

  const popup = (
    <div className="success-popup-overlay" onClick={onClose}>
      <div
        className="success-popup-content"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="success-popup-body">
          <div className="success-popup-icon-container">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="success-popup-icon"
            >
              <path
                d="M20 6L9 17L4 12"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </div>
          <h3 className="success-popup-title">Success!</h3>
          <p className="success-popup-message">{message}</p>
          <Button variant="popup-ok" onClick={onOk || onClose}>
            OK
          </Button>
        </div>
      </div>
    </div>
  );

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

export default SuccessPopup;

