import React from "react";

export default ({ name, guesses, totalScore }) => (
  <div className="player-scores__score-tile">
    <span className="player-scores__player-name">{name}</span>
    <span className="player-scores__total-score">Score: {totalScore}</span>
    <ol className="player-scores__round-score-list">
      <li className="player-scores__round-score">{guesses["1"] && guesses["1"].score}</li>
      <li className="player-scores__round-score">{guesses["2"] && guesses["2"].score}</li>
      <li className="player-scores__round-score">{guesses["3"] && guesses["3"].score}</li>
      <li className="player-scores__round-score">{guesses["4"] && guesses["4"].score}</li>
      <li className="player-scores__round-score">{guesses["5"] && guesses["5"].score}</li>
    </ol>
  </div>
);