Yaltopia-FIFA/components/standings/StandingsTable.tsx

import { TeamBadge } from "@/components/teams/TeamBadge";

type Standing = {
  team_id: string;
  team_name: string;
  logo_path: string | null;
  played: number;
  won: number;
  drawn: number;
  lost: number;
  goals_for: number;
  goals_against: number;
  goal_difference: number;
  points: number;
};

export function StandingsTable({ standings }: { standings: Standing[] }) {
  const sorted = [...standings].sort((a, b) => {
    if (b.points !== a.points) return b.points - a.points;
    if (b.goal_difference !== a.goal_difference)
      return b.goal_difference - a.goal_difference;
    if (b.goals_for !== a.goals_for) return b.goals_for - a.goals_for;
    return a.team_name.localeCompare(b.team_name);
  });

  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-white/10 text-left text-xs text-[var(--color-muted)]">
            <th className="pb-3 pr-2">#</th>
            <th className="pb-3 pr-4">Team</th>
            <th className="pb-3 px-2 text-center">P</th>
            <th className="pb-3 px-2 text-center">W</th>
            <th className="pb-3 px-2 text-center">D</th>
            <th className="pb-3 px-2 text-center">L</th>
            <th className="pb-3 px-2 text-center">GF</th>
            <th className="pb-3 px-2 text-center">GA</th>
            <th className="pb-3 px-2 text-center">GD</th>
            <th className="pb-3 pl-2 text-center">Pts</th>
          </tr>
        </thead>
        <tbody>
          {sorted.map((row, i) => (
            <tr key={row.team_id} className="border-b border-white/5">
              <td className="py-3 pr-2 text-[var(--color-muted)]">{i + 1}</td>
              <td className="py-3 pr-4">
                <TeamBadge name={row.team_name} logoPath={row.logo_path} size="sm" />
              </td>
              <td className="px-2 text-center">{row.played}</td>
              <td className="px-2 text-center">{row.won}</td>
              <td className="px-2 text-center">{row.drawn}</td>
              <td className="px-2 text-center">{row.lost}</td>
              <td className="px-2 text-center">{row.goals_for}</td>
              <td className="px-2 text-center">{row.goals_against}</td>
              <td className="px-2 text-center">{row.goal_difference}</td>
              <td className="pl-2 text-center font-semibold text-cyan-400">
                {row.points}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}