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"

export default function Home() {
  const [heWantsToPlay, setHeWantsToPlay] = useState(false)
  return (
    <div id="box">
      <button id="navExpand">
        <img id="burgerMenu" src="/assets/burger-menu.png" alt="Burger Menu" />
      </button>
      <div id="shield">
        <div id="width">
          <h1>Leaky</h1>
          <h1>Ships</h1>
        </div>
      </div>
      {!heWantsToPlay ? (
        <>
          <div id="videoWrapper">
            <FontAwesomeIcon icon={faCirclePlay} />
          </div>
          <button id="startButton" onClick={() => setHeWantsToPlay(true)}>
            START
          </button>
        </>
      ) : (
        <div id="startBox">
          <button id="back" onClick={() => setHeWantsToPlay(false)}>
            <FontAwesomeIcon icon={faLeftLong} />
          </button>
          <div id="sameWidth">
            <button className="optionButton">
              <span>Raum erstellen</span>
              <FontAwesomeIcon icon={faPlus} />
            </button>
            <button className="optionButton">
              <span>Raum beitreten</span>
              <FontAwesomeIcon icon={faUserPlus} />
            </button>
            <button className="optionButton">
              <span>Zuschauen</span>
              <FontAwesomeIcon icon={faEye} />
            </button>
          </div>
        </div>
      )}
    </div>
  )
}
