import { motion } from 'framer-motion';

interface MissionRevealProps {
    votes: boolean[];
}

export default function MissionReveal({ votes }: MissionRevealProps) {
    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">
                <h2 className="text-4xl font-bold text-white mb-8">Resultados de la Misión</h2>
                <div className="flex gap-4 justify-center">
                    {votes.map((vote, idx) => (
                        <motion.div
                            key={idx}
                            className={`w-24 h-32 rounded-lg flex items-center justify-center text-4xl ${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>
            </div>
        </motion.div>
    );
}
