import type { PlayerScore, RoomSnapshot } from "@nerdware/shared"

interface ScoreboardProps {
  scores: PlayerScore[]
  snapshot: RoomSnapshot
  playerId: string | null
}

export function Scoreboard({ scores, snapshot, playerId }: ScoreboardProps) {
  const nameOf = (id: string) =>
    snapshot.players.find((p) => p.id === id)?.name ?? "?"
  const ranked = [...scores].sort((a, b) => b.score - a.score)

  return (
    <ol className="flex flex-col gap-1">
      {ranked.map((s, i) => (
        <li
          key={s.playerId}
          className="bg-muted/40 flex items-center justify-between rounded-md px-3 py-2 text-sm"
        >
          <span className="flex items-center gap-2">
            <span className="text-muted-foreground w-5 text-right tabular-nums">
              {i + 1}
            </span>
            <span>
              {nameOf(s.playerId)}
              {s.playerId === playerId && (
                <span className="text-muted-foreground"> (toi)</span>
              )}
            </span>
          </span>
          <span className="font-heading font-bold tabular-nums">{s.score}</span>
        </li>
      ))}
    </ol>
  )
}