/**
 * Error Modal - Focolari Voting System
 * Modal per errori
 */

import {Button, Modal} from '../components';

interface ErrorModalProps {
    isOpen: boolean;
    onClose: () => void;
    title?: string;
    message: string;
}

export function ErrorModal({
                               isOpen,
                               onClose,
                               title = 'Errore',
                               message
                           }: ErrorModalProps) {
    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            variant="error"
            fullscreen
        >
            <div className="text-center text-white p-8 max-w-2xl">
                {/* Error Icon */}
                <div className="mb-8">
                    <div
                        className="inline-flex items-center justify-center w-32 h-32 rounded-full bg-white/20 animate-pulse-error">
                        <svg
                            className="w-20 h-20 text-white"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={3}
                                d="M6 18L18 6M6 6l12 12"
                            />
                        </svg>
                    </div>
                </div>

                {/* Title */}
                <h1 className="text-5xl md:text-6xl font-bold mb-6 animate-slide-up">
                    {title}
                </h1>

                {/* Error Message */}
                <p className="text-2xl md:text-3xl opacity-90 mb-12 animate-fade-in">
                    {message}
                </p>

                {/* Close Button */}
                <Button
                    variant="secondary"
                    size="lg"
                    onClick={onClose}
                    className="bg-white text-error hover:bg-gray-100"
                >
                    Chiudi
                </Button>
            </div>
        </Modal>
    );
}

export default ErrorModal;