import { dispatch, usePlayerName } from "../../../domain/gameStore";
import DelayedButton from "../../util/DelayedButton";
import styles from "./Lobby.module.css";

const StartGame = () => {
  const playerName = usePlayerName();

  return (
    <>
      <span className={styles.label}>Playing as {playerName}</span>
      <DelayedButton
        autoFocus
        onEnd={dispatch.startRound}
        countDownFormatter={rem => `Click to cancel, ${rem}s...`}
      >
        Start Game
      </DelayedButton>
    </>
  );
};

export default StartGame;
