function TeamScores({ teams, myTeamId }) {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4 mb-4 md:mb-6">
      {teams.map((team, index) => {
        const isMe = team.id === myTeamId
        const colors = [
          'from-blue-600/30 to-blue-800/30 border-blue-400/30',
          'from-purple-600/30 to-purple-800/30 border-purple-400/30',
          'from-emerald-600/30 to-emerald-800/30 border-emerald-400/30',
          'from-amber-600/30 to-amber-800/30 border-amber-400/30',
          'from-rose-600/30 to-rose-800/30 border-rose-400/30',
          'from-cyan-600/30 to-cyan-800/30 border-cyan-400/30',
        ]
        const colorClass = colors[index % colors.length]

        return (
          <div
            key={team.id}
            className={`p-3 md:p-5 rounded-xl border backdrop-blur-sm transition-all duration-300 ${
              isMe
                ? 'bg-gradient-to-br from-blue-500/20 to-indigo-500/20 border-blue-400/50 glow-blue scale-[1.02]'
                : `bg-gradient-to-br ${colorClass}`
            }`}
          >
            <h3 className="text-sm md:text-lg font-bold text-white mb-0.5 md:mb-1 truncate">
              {isMe && '⭐ '}{team.name}
            </h3>
            <p className="font-display text-xl md:text-3xl font-bold text-gradient-gold">{team.score}</p>
            <p className="text-[10px] md:text-xs text-gray-400">баллов</p>
          </div>
        )
      })}
    </div>
  )
}

export default TeamScores