import { motion } from 'framer-motion';

interface MissionRevealProps {
    votes: boolean[];
}

export default function MissionReveal({ votes }: MissionRevealProps) {
    return (
        <motion.div
            className="fixed inset-0 flex flex-col items-center justify-center bg-black/90 z-50"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
        >
            <h2 className="text-4xl font-bold text-white mb-8">Resultados de la Misión</h2>
            <div className="flex gap-4 justify-center mb-8">
                {votes.map((vote, idx) => (
                    <motion.div
                        key={idx}
                        className={`w-24 h-32 rounded-lg flex items-center justify-center text-5xl font-bold text-white ${vote ? 'bg-blue-600' : 'bg-red-600'
                            }`}
                        initial={{ scale: 0, rotate: -180 }}
                        animate={{ scale: 1, rotate: 0 }}
                        transition={{ delay: idx * 0.3 }}
                    >
                        {vote ? '✓' : '✗'}
                    </motion.div>
                ))}
            </div>
            <p className="text-white text-xl">Los resultados se revelarán automáticamente...</p>
        </motion.div>
    );
}