import React from 'react';
import { motion } from 'framer-motion';
import { Clock } from 'lucide-react';

interface WaitingToRejoinProps {
  playerName: string;
  score: number;
}

export const WaitingToRejoin: React.FC<WaitingToRejoinProps> = ({ playerName, score }) => {
  return (
    <div className="flex flex-col items-center justify-center h-screen p-4 md:p-6 text-center overflow-hidden">
      <motion.div
        initial={{ scale: 0.8, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        className="bg-white/10 backdrop-blur-md p-8 md:p-12 rounded-[2rem] border-4 border-white/20 shadow-xl max-w-md w-full"
      >
        <motion.div
          animate={{ rotate: 360 }}
          transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
          className="bg-green-500 p-6 rounded-full inline-block mb-6 shadow-lg"
        >
          <Clock size={48} className="text-white" />
        </motion.div>

        <h1 className="text-3xl font-black font-display mb-4">Welcome Back!</h1>
        
        <p className="text-xl opacity-80 mb-2">
          <span className="font-bold text-yellow-300">{playerName}</span>
        </p>
        
        <div className="bg-white/10 rounded-2xl p-4 mb-6">
          <p className="text-sm uppercase tracking-wide opacity-70 mb-1">Your Score</p>
          <p className="text-4xl font-black">{score.toLocaleString()}</p>
        </div>
        
        <p className="text-lg opacity-70">
          Waiting for the current question to finish...
        </p>
        
        <motion.div
          className="flex justify-center gap-2 mt-6"
          animate={{ opacity: [0.5, 1, 0.5] }}
          transition={{ repeat: Infinity, duration: 1.5 }}
        >
          <div className="w-3 h-3 bg-white rounded-full" />
          <div className="w-3 h-3 bg-white rounded-full" />
          <div className="w-3 h-3 bg-white rounded-full" />
        </motion.div>
      </motion.div>
    </div>
  );
};