import { motion } from 'framer-motion';

interface MissionResultProps {
    success: boolean;
    successes: number;
    fails: number;
}

export default function MissionResult({ success, successes, fails }: MissionResultProps) {
    return (
        <motion.div
            className="fixed inset-0 flex items-center justify-center bg-black/90 z-50"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
        >
            <div className="text-center">
                <motion.h2
                    className={`text-6xl font-bold mb-8 ${success ? 'text-blue-500' : 'text-red-500'}`}
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    transition={{ type: 'spring', stiffness: 200 }}
                >
                    {success ? '¡MISIÓN EXITOSA!' : 'MISIÓN FALLIDA'}
                </motion.h2>
                <div className="text-white text-2xl">
                    <p>Éxitos: {successes}</p>
                    <p>Sabotajes: {fails}</p>
                </div>
            </div>
        </motion.div>
    );
}