import React from "react"
import './index.css';

export default function Leaderboard({ leaderboard }) {

  if (leaderboard == null)
    return <p>Loading...</p>

  //  var listItems = Object.keys(data).map(playerName => {
  //    var rank = data[playerName];
  //
  //    return <li key={playerName}>
  //      {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw}
  //      </li>
  //  });
  //  return <ul>{listItems}</ul>;

  const tableRows = Object.keys(leaderboard).map(playerName => {
    var rank = leaderboard[playerName];

    // TODO tr:  className={data.isCurrentUser(playerName) && 'username'}
    return <tr key={playerName} >
      <td>{playerName}</td>
      <td>{rank.gamesPlayed}</td>
      <td>{rank.gamesWon}</td>
      <td>{rank.gamesDraw}</td>
    </tr>
  });

  return <div className="Leaderboard">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Played</th>
          <th>Won</th>
          <th>Draw</th>
        </tr>
      </thead>
      <tbody>
        {tableRows}
      </tbody>
    </table>
  </div>
};