import React from 'react';
import { AlertTriangle, CheckCircle, Info, XCircle } from 'lucide-react';

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

export const AlertDialog: React.FC<AlertDialogProps> = ({ isOpen, type, title, message, onClose }) => {
    if (!isOpen) return null;

    const getIcon = () => {
        switch (type) {
            case 'success':
                return <CheckCircle className="w-12 h-12 text-green-500" />;
            case 'error':
                return <XCircle className="w-12 h-12 text-red-500" />;
            case 'warning':
                return <AlertTriangle className="w-12 h-12 text-amber-500" />;
            case 'info':
                return <Info className="w-12 h-12 text-blue-500" />;
        }
    };

    const getBorderColor = () => {
        switch (type) {
            case 'success':
                return 'border-green-500';
            case 'error':
                return 'border-red-500';
            case 'warning':
                return 'border-amber-500';
            case 'info':
                return 'border-blue-500';
        }
    };

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center">
            {/* Backdrop */}
            <div
                className="absolute inset-0 bg-black/80 backdrop-blur-sm"
                onClick={onClose}
            />

            {/* Dialog */}
            <div
                className={`relative bg-black/95 backdrop-blur-md border-2 ${getBorderColor()} rounded-lg shadow-2xl max-w-md w-full mx-4 animate-fadeIn`}
            >
                {/* Icon and Title */}
                <div className="flex items-center gap-4 p-6 border-b border-white/10">
                    {getIcon()}
                    <h2 className="text-xl font-tech font-bold text-white uppercase tracking-wider">
                        {title}
                    </h2>
                </div>

                {/* Message */}
                <div className="p-6">
                    <p className="text-slate-300 font-mono text-sm whitespace-pre-wrap leading-relaxed">
                        {message}
                    </p>
                </div>

                {/* Button */}
                <div className="flex justify-end p-6 border-t border-white/10">
                    <button
                        onClick={onClose}
                        className="px-6 py-2 bg-neon-blue/20 hover:bg-neon-blue/30 border border-neon-blue text-neon-blue font-tech font-bold rounded transition-colors shadow-glow-blue"
                    >
                        OK
                    </button>
                </div>
            </div>
        </div>
    );
};