slideshare/src/components/ui/ConfirmDialog.tsx

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

interface ConfirmDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title?: string;
  message: string;
  type?: 'info' | 'warning' | 'danger';
  confirmText?: string;
  cancelText?: string;
  isDestructive?: boolean;
}

export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  type = 'info',
  confirmText,
  cancelText = 'Cancel',
  isDestructive = false
}) => {
  const getIcon = () => {
    switch (type) {
      case 'danger':
        return '⚠️';
      case 'warning':
        return '⚠️';
      default:
        return '❓';
    }
  };

  const getTitle = () => {
    if (title) return title;
    
    switch (type) {
      case 'danger':
        return 'Confirm Deletion';
      case 'warning':
        return 'Confirm Action';
      default:
        return 'Confirm';
    }
  };

  const getConfirmText = () => {
    if (confirmText) return confirmText;
    
    switch (type) {
      case 'danger':
        return 'Delete';
      case 'warning':
        return 'Continue';
      default:
        return 'Confirm';
    }
  };

  const handleConfirm = () => {
    onConfirm();
    onClose();
  };

  return (
    <Modal 
      isOpen={isOpen} 
      onClose={onClose} 
      size="small" 
      title={getTitle()}
      closeOnOverlayClick={false}
    >
      <div className="confirm-dialog">
        <div className="confirm-content">
          <div className="confirm-icon">{getIcon()}</div>
          <p className="confirm-message">{message}</p>
        </div>
        <div className="confirm-actions">
          <Button
            variant="secondary"
            onClick={onClose}
          >
            {cancelText}
          </Button>
          <Button
            variant={isDestructive || type === 'danger' ? 'danger' : 'primary'}
            onClick={handleConfirm}
          >
            {getConfirmText()}
          </Button>
        </div>
      </div>
    </Modal>
  );
};