import { motion } from 'framer-motion';
import { Trophy } from 'lucide-react';

interface VictoryOverlayProps {
  winnerName: string;
  isUserWinner: boolean;
}

export function VictoryOverlay({ winnerName, isUserWinner }: VictoryOverlayProps) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="fixed inset-0 z-[90] flex items-center justify-center pointer-events-none"
    >
      <div className="text-center">
        <motion.div
          initial={{ scale: 0, rotate: -30 }}
          animate={{ scale: 1, rotate: 0 }}
          transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.2 }}
          className="inline-flex mb-4"
        >
          <Trophy className="w-20 h-20 text-amber-500" />
        </motion.div>
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.5 }}
          className="text-5xl font-extrabold tracking-tight"
          style={{
            background: 'linear-gradient(135deg, #FFD700, #FFA500)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          {isUserWinner ? 'VICTORY' : 'DEFEAT'}
        </motion.h1>
        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.8 }}
          className="text-lg text-text-secondary mt-2"
        >
          {winnerName} wins the match
        </motion.p>
      </div>
    </motion.div>
  );
}
