import React from 'react';
import './popup.css';

const Popup = ({ alert, closeAlert }) => {
  if (!alert) return null;

  const titleClass = alert.type === "success" ? "popup-title success" : alert.type === "error" ? "popup-title error" : "popup-title";

  return (
    <div className={`popup-overlay show ${alert.closeOutside ? 'close-outside' : ''}`} onClick={alert.closeOutside ? closeAlert : null}>
      <div className="popup-box" onClick={(e) => e.stopPropagation()}>
        <h2 className={titleClass}>{alert.title}</h2>
        <p dangerouslySetInnerHTML={alert.parse ? { __html: alert.description } : { __html: alert.description.replace(/</g, '&lt;').replace(/>/g, '&gt;') }} />
        
        {alert.mode === "confirm" ? (
          <div className="popup-buttons">
            <button className="popup-ok" onClick={() => { alert.do?.(); closeAlert(); }}>
              {alert.btn1_text || "Yes"}
            </button>
            <button className="popup-cancel" onClick={closeAlert}>
              {alert.btn2_text || "No"}
            </button>
          </div>
        ) : (
          <button className="popup-ok" onClick={closeAlert}>
            {alert.btn1_text || "OK"}
          </button>
        )}
      </div>
    </div>
  );
};

export default Popup;