import { faPlus, faUserPlus } from "@fortawesome/pro-solid-svg-icons"
import { faEye, faLeftLong } from "@fortawesome/pro-regular-svg-icons"
import { faCirclePlay } from "@fortawesome/pro-thin-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useState } from "react"
import Logo from "../../components/Logo"
import BurgerMenu from "../../components/BurgerMenu"
import OptionButton from "../../components/OptionButton"

export default function Home() {
  const [heWantsToPlay, setHeWantsToPlay] = useState<boolean | null>(false)
  return (
    <div className="h-full bg-theme">
      <div className="mx-auto flex h-full max-w-screen-md flex-col items-center justify-evenly">
        <Logo />
        <BurgerMenu />
        {!heWantsToPlay ? (
          <>
            <div className="flex h-36 w-64 items-center justify-center rounded-xl border-4 border-black bg-[#2227] sm:h-48 sm:w-96 md:h-72 md:w-[32rem] md:border-[6px] xl:h-[26rem] xl:w-[48rem]">
              <FontAwesomeIcon
                className="text-6xl sm:text-7xl md:text-8xl"
                icon={faCirclePlay}
              />
            </div>
            <button
              className="font-farro rounded-lg border-b-4 border-orange-400 bg-warn px-12 pt-5 pb-4 text-2xl font-bold duration-100 active:border-t-4 active:border-b-0 sm:rounded-xl sm:border-b-[6px] sm:px-14 sm:pt-6 sm:pb-5 sm:text-3xl sm:active:border-t-[6px] md:rounded-2xl md:border-b-8 md:px-20 md:pt-7 md:pb-6 md:text-4xl md:active:border-t-8 xl:px-24 xl:pt-10 xl:pb-8 xl:text-5xl"
              onClick={() => setTimeout(() => setHeWantsToPlay(true), 200)}
            >
              START
            </button>
          </>
        ) : (
          <div className="flex flex-col items-center rounded-xl border-4 border-black bg-grayish px-4 py-6 shadow-lg sm:mx-8 sm:p-12 md:w-full">
            <button
              className="-mt-2 w-20 self-start rounded-xl border-b-4 border-shield-gray bg-voidDark text-2xl text-grayish duration-100 active:border-t-4 active:border-b-0 sm:-mt-6 sm:w-40 sm:px-2 sm:text-5xl"
              onClick={() => setTimeout(() => setHeWantsToPlay(false), 200)}
            >
              <FontAwesomeIcon icon={faLeftLong} />
            </button>
            <div className="flex flex-col items-center gap-6 sm:gap-12">
              <OptionButton icon={faPlus}>Raum erstellen</OptionButton>
              <OptionButton icon={faUserPlus}>Raum beitreten</OptionButton>
              <OptionButton icon={faEye}>Zuschauen</OptionButton>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
