import React from 'react';
import ReactDOM from 'react-dom';
import './AlertPopup.css';

interface AlertPopupProps {
  type: 'success' | 'error';
  title?: string;
  message?: string;
  onClose: () => void;
}

const AlertPopup: React.FC<AlertPopupProps> = ({
  type,
  title = type === 'success' ? 'Success!' : 'Oh Snap!',
  message = type === 'success' ? 'Your operation completed successfully.' : 'Something went wrong. Please try again.',
  onClose
}) => {
  const icon = type === 'success' ? '😄' : '😕';
  const buttonText = type === 'success' ? 'Close' : 'Close';

  return ReactDOM.createPortal(
    <div className="alert-overlay">
      <div className={`alert-box alert-${type}`}>
        {/* <button className="alert-close" onClick={onClose}>×</button> */}
        <div className="alert-icon">{icon}</div>
        <div className="alert-title">{title}</div>
        <div className="alert-message">{message}</div>
        <button className="alert-button" onClick={onClose}>{buttonText}</button>
      </div>
    </div>,
    document.body
  );
};

export default AlertPopup;