function TeamScores({ teams, myTeamId }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4 mb-6 md:mb-8">
      {teams.map((team) => (
        <div
          key={team.id}
          className={`p-4 md:p-6 rounded-xl border shadow-lg transition-all duration-200 ${
            team.id === myTeamId
              ? 'bg-blue-900 border-blue-500'
              : 'bg-slate-800 border-slate-700'
          }`}
        >
          <h3 className="text-lg md:text-2xl font-bold text-white mb-1 md:mb-2">{team.name}</h3>
          <p className="text-2xl md:text-4xl font-bold text-blue-400">{team.score} баллов</p>
        </div>
      ))}
    </div>
  )
}

export default TeamScores
