'use client';

import { Standing } from '../../domain/entities/Standing';
import { Driver } from '../../domain/entities/Driver';

interface StandingsTableProps {
  standings: Standing[];
  drivers: Driver[];
}

export default function StandingsTable({ standings, drivers }: StandingsTableProps) {
  const getDriverName = (driverId: string): string => {
    const driver = drivers.find(d => d.id === driverId);
    return driver?.name || 'Unknown Driver';
  };

  if (standings.length === 0) {
    return (
      <div className="text-center py-8 text-gray-400">
        No standings available
      </div>
    );
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full">
        <thead>
          <tr className="border-b border-charcoal-outline">
            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Pos</th>
            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Driver</th>
            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Points</th>
            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Wins</th>
            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Races</th>
          </tr>
        </thead>
        <tbody>
          {standings.map((standing) => {
            const isLeader = standing.position === 1;
            
            return (
              <tr 
                key={`${standing.leagueId}-${standing.driverId}`}
                className="border-b border-charcoal-outline/50 hover:bg-iron-gray/20 transition-colors"
              >
                <td className="py-3 px-4">
                  <span className={`font-semibold ${isLeader ? 'text-yellow-500' : 'text-white'}`}>
                    {standing.position}
                  </span>
                </td>
                <td className="py-3 px-4">
                  <span className={isLeader ? 'text-white font-semibold' : 'text-white'}>
                    {getDriverName(standing.driverId)}
                  </span>
                </td>
                <td className="py-3 px-4">
                  <span className="text-white font-medium">{standing.points}</span>
                </td>
                <td className="py-3 px-4">
                  <span className="text-white">{standing.wins}</span>
                </td>
                <td className="py-3 px-4">
                  <span className="text-white">{standing.racesCompleted}</span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}