import React from 'react';
import { GameState } from '../types';

interface LeaderboardProps {
  gameState: GameState;
  currentUserId: string;
}

export function Leaderboard({ gameState, currentUserId }: LeaderboardProps) {
  const sortedUsers = Object.entries(gameState.users)
    .sort(([, a], [, b]) => b.clicks - a.clicks)
    .slice(0, 10);

  return (
    <div className="bg-gradient-to-b from-orange-600 to-red-600 p-6 rounded-xl border-4 border-pink-400 shadow-2xl">
      <h2 className="text-3xl font-bold text-yellow-300 mb-6 text-center" style={{ fontFamily: 'Comic Sans MS, cursive' }}>
        👑 BOZO LEADERBOARD 👑
      </h2>
      
      <div className="space-y-3">
        {sortedUsers.map(([userId, user], index) => {
          const isCurrentUser = userId === currentUserId;
          const isTopThree = index < 3;
          
          return (
            <div 
              key={userId}
              className={`p-3 rounded-lg border-2 transition-all duration-300 ${
                isCurrentUser 
                  ? 'bg-gradient-to-r from-yellow-400 to-orange-400 border-white shadow-lg transform scale-105' 
                  : isTopThree
                  ? 'bg-gradient-to-r from-purple-500 to-pink-500 border-yellow-300'
                  : 'bg-gradient-to-r from-gray-600 to-gray-700 border-gray-400'
              }`}
            >
              <div className="flex justify-between items-center">
                <div className="flex items-center space-x-3">
                  <span className="text-2xl font-bold">
                    {index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : `#${index + 1}`}
                  </span>
                  <span className={`font-bold ${isCurrentUser ? 'text-black' : 'text-white'}`}>
                    {user.name} {isCurrentUser ? '(You)' : ''}
                  </span>
                </div>
                <span className={`text-xl font-bold ${isCurrentUser ? 'text-black' : 'text-yellow-300'}`}>
                  {user.clicks.toLocaleString()}
                </span>
              </div>
            </div>
          );
        })}
      </div>
      
      <div className="mt-6 text-center">
        <div className="text-lg text-yellow-200">
          Total Players: {Object.keys(gameState.users).length}
        </div>
      </div>
    </div>
  );
}