import React from "react";
import styled from "styled-components";

const Tile = styled.div`
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  min-width: 10em;
`

const Name = styled.span`
  font-size: 1.4em;
  font-weight: 800;
`

const TotalScore = styled.span`
  font-size: 1.1em;
  margin-left: .5em;
`

const List = styled.div`
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 20%;
  margin-left: 1em;
  list-style: none;
`

const Score = styled.span`
`

export default ({ name, guesses, totalScore }) => (
  <Tile>
    <Name>{name}</Name>
    <TotalScore>Score: {totalScore}</TotalScore>
    <List>
      {
        ["1", "2", "3", "4", "5"]
          .map(num => {
            const score = guesses[num]?.score
            return score !== undefined ? <Score key={num}>{num}: {score}</Score> : null
          })
      }
    </List>
  </Tile>
);