slideshare/src/components/ui/AlertDialog.tsx

import React from 'react';
import { Modal } from './Modal.tsx';
import { Button } from './buttons/Button.tsx';
import './AlertDialog.css';

interface AlertDialogProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  message: string;
  type?: 'info' | 'warning' | 'error' | 'success';
  confirmText?: string;
}

export const AlertDialog: React.FC<AlertDialogProps> = ({
  isOpen,
  onClose,
  title,
  message,
  type = 'info',
  confirmText = 'OK'
}) => {
  const getIcon = () => {
    switch (type) {
      case 'error':
        return '❌';
      case 'warning':
        return '⚠️';
      case 'success':
        return '✅';
      default:
        return 'ℹ️';
    }
  };

  const getTitle = () => {
    if (title) return title;
    
    switch (type) {
      case 'error':
        return 'Error';
      case 'warning':
        return 'Warning';
      case 'success':
        return 'Success';
      default:
        return 'Information';
    }
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="small" title={getTitle()}>
      <div className="alert-dialog">
        <div className="alert-content">
          <div className="alert-icon">{getIcon()}</div>
          <p className="alert-message">{message}</p>
        </div>
        <div className="alert-actions">
          <Button
            variant="primary"
            onClick={onClose}
          >
            {confirmText}
          </Button>
        </div>
      </div>
    </Modal>
  );
};