import React from 'react'
import { Flex } from 'reflexbox'
import { Text, Space, Button } from 'rebass'
import Immutable from 'seamless-immutable'

const GameList = (props) => (
  <div>
    {Immutable.asMutable(props.games).map((game, index) => {

      const joinGame = () => props.joinGame(game.id)

      return (<Flex key={index}>
        <Text>{game.name}</Text>
        <Space auto />
        <Button onClick={joinGame}>Join</Button>
      </Flex>)
    })}
  </div>
)

export default GameList