'use client';

import { FaTrophy, FaMedal } from 'react-icons/fa';

type ScoreboardProps = {
  scoreboard: Array<{
    team: string;
    total: number;
    round1: number;
    round2: number;
    round3: number;
    round4: number;
  }>;
};

export function Scoreboard({ scoreboard }: ScoreboardProps) {
  return (
    <div className="bg-white/60 backdrop-blur-sm rounded-xl p-6 shadow-sm border border-amber-100/50 mb-12">
      <div className="text-2xl font-semibold text-amber-900 mb-6">Класиране</div>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="border-b-2 border-gray-200">
              <th className="px-4 py-3 text-left text-sm font-semibold text-gray-600">Отбор</th>
              <th className="px-4 py-3 text-center text-sm font-semibold text-gray-600">Кръг 1</th>
              <th className="px-4 py-3 text-center text-sm font-semibold text-gray-600">Кръг 2</th>
              <th className="px-4 py-3 text-center text-sm font-semibold text-gray-600">Кръг 3</th>
              <th className="px-4 py-3 text-center text-sm font-semibold text-gray-600">Кръг 4</th>
              <th className="px-4 py-3 text-center text-sm font-semibold text-gray-600">Общо</th>
            </tr>
          </thead>
          <tbody>
            {scoreboard.map((score, index) => (
              <tr 
                key={score.team}
                className={`
                  border-b border-gray-100 hover:bg-gray-50 transition-colors
                  ${index === 0 ? 'bg-orange-50' : ''}
                `}
              >
                <td className="px-4 py-3 font-medium text-gray-800">
                  {score.team === 'Answers' ? (
                    <span className="text-orange-500 mr-2">👑</span>
                  ) : index === 1 ? (
                    <FaTrophy className="inline mr-2 text-yellow-500" />
                  ) : index === 2 ? (
                    <FaMedal className="inline mr-2 text-gray-400" />
                  ) : index === 3 ? (
                    <FaMedal className="inline mr-2 text-amber-700" />
                  ) : null}
                  {score.team}
                </td>
                <td className="px-4 py-3 text-center text-gray-600">
                  {score.round1}
                </td>
                <td className="px-4 py-3 text-center text-gray-600">
                  {score.round2}
                </td>
                <td className="px-4 py-3 text-center text-gray-600">
                  {score.round3}
                </td>
                <td className="px-4 py-3 text-center text-gray-600">
                  {score.round4}
                </td>
                <td className="px-4 py-3 text-center font-semibold text-gray-800">
                  {score.total}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}