import BurgerMenu from "../../components/BurgerMenu"
import LobbyFrame from "../../components/Lobby/LobbyFrame"
import Settings from "../../components/Lobby/SettingsFrame/Settings"
import Logo from "../../components/Logo"
import classNames from "classnames"
import Head from "next/head"
import { useState } from "react"

export default function Home() {
  const [settings, setSettings] = useState(false)
  return (
    <div className="h-full bg-theme">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div
        className={classNames(
          "mx-auto flex h-full max-w-screen-2xl flex-col items-center justify-evenly",
          { "blur-sm": settings }
        )}
      >
        <Logo small={true} />
        <LobbyFrame openSettings={() => setSettings(true)} />
      </div>
      <BurgerMenu blur={settings} />
      {settings ? <Settings closeSettings={() => setSettings(false)} /> : <></>}
    </div>
  )
}
