import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import './StatusPortal.css';

interface StatusPortalProps {
  status: 'success' | 'warning' | 'failed';
  message: string;
  onClose?: () => void;
}

const StatusPortal: React.FC<StatusPortalProps> = ({ status, message, onClose }) => {
  const portalRoot = document.getElementById('portal-root') || document.body;

  useEffect(() => {
    const timer = setTimeout(() => {
      if (onClose) onClose();
    }, 3000);
    return () => clearTimeout(timer);
  }, [onClose]);

  const getIcon = () => {
    switch (status) {
      case 'success':
        return '✔️';
      case 'warning':
        return '⚠️';
      case 'failed':
        return '❌';
      default:
        return '';
    }
  };

  return ReactDOM.createPortal(
    <div className={`status-container ${status}`}>
      <div className="icon">{getIcon()}</div>
      <div className="title">{status.charAt(0).toUpperCase() + status.slice(1)}</div>
      <div className="message">{message}</div>
    </div>,
    portalRoot
  );
};

export default StatusPortal;