import React from "react";
import styled from "styled-components";
import PlayerScoreTile from "./PlayerScoreTile";

const ScoreBoardContainer = styled.div`
  flex: 2;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  align-content: space-around;
  max-width: 80%;
  margin-top: 2em;
`

export default ({ players }) => (
  <ScoreBoardContainer>
    {
      players
        .filter(({ currentRound }) => currentRound === null)
        .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
        .map((data) => <PlayerScoreTile key={data.name} {...data} />)
    }
  </ScoreBoardContainer>
);