import {FunctionComponent} from "react";
import {Connection} from "../../pages/Room";
import {Button} from "../../components/Button";

interface Props {
    winner: string | undefined;
    handleLobbyAction: (action: string) => void;
    playerList: Connection[];
    onKickClick: (playerId: string) => void;
}

const Lobby: FunctionComponent<Props> = ({winner, handleLobbyAction, playerList, onKickClick}) => {

    const onStartClick = () => {
        console.log('Start Game');
        handleLobbyAction("START");
    }

    return (
        <main className={"game-lobby"}>
            <h1>Waiting for host to start the game</h1>
            <section>
                <h2>Players</h2>
                <ol className={"game-lobby__player-list"}>
                    {
                        playerList.map((player) => {
                            return <li key={player.Id}>
                                <p>{player.Name}</p>
                                <Button className={"button-danger"} onClick={() => onKickClick(player.Id)}>Kick</Button>
                            </li>
                        })
                    }
                </ol>
            </section>
            <section>
                <h2>Game Settings</h2>
                <i>Not available... yet?</i>
            </section>
            <Button className={"button-success game-lobby__start-game"} onClick={onStartClick}>
                <strong>Start Game</strong>
            </Button>
        </main>
    );
}

export default Lobby;