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

const PlayerListContainer = styled.div`
  flex: 1;
  
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;

  border-left: 2px solid #777;
  height: 100%;
  padding-left: 1rem;
`

const Label = styled.span`
  padding: 0.2em;
`

const PlayerList = styled.ul`
`

const PlayerName = styled.li`
`

export default ({ playerNames }) => (
  <PlayerListContainer>
    <Label>Players</Label>
    <PlayerList>
      {
        playerNames
          .map(name => <PlayerName key={name}>{name}</PlayerName>)
      }
    </PlayerList>
  </PlayerListContainer>
);