import React from 'react';
import { Modal } from './Modal.tsx';

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
            type="button"
            className="button primary"
            onClick={onClose}
            autoFocus
          >
            {confirmText}
          </button>
        </div>
      </div>
      
      <style jsx>{`
        .alert-dialog {
          text-align: center;
        }
        
        .alert-content {
          margin-bottom: 2rem;
        }
        
        .alert-icon {
          font-size: 2.5rem;
          margin-bottom: 1rem;
        }
        
        .alert-message {
          color: #374151;
          font-size: 1rem;
          line-height: 1.5;
          margin: 0;
        }
        
        .alert-actions {
          display: flex;
          justify-content: center;
          gap: 0.75rem;
        }
        
        .button {
          padding: 0.75rem 1.5rem;
          border-radius: 0.5rem;
          font-weight: 500;
          font-size: 0.875rem;
          border: none;
          cursor: pointer;
          transition: all 0.2s ease;
          min-width: 80px;
        }
        
        .button.primary {
          background: #3b82f6;
          color: white;
        }
        
        .button.primary:hover {
          background: #2563eb;
        }
        
        .button.primary:focus {
          outline: 2px solid #3b82f6;
          outline-offset: 2px;
        }
      `}</style>
    </Modal>
  );
};