import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useRouter } from "next/router"
import React, { useEffect } from "react"

function Logout() {
  const router = useRouter()

  useEffect(() => {
    const timeout = setTimeout(() => router.push("/dev"), 2000)
    return () => clearTimeout(timeout)
  }, [router])

  return (
    <div className="flex h-screen w-full items-center justify-center bg-gray-900 bg-[url('/images/wallpaper.jpg')] bg-cover bg-center bg-no-repeat">
      <div className="rounded-xl bg-gray-800 bg-opacity-50 px-16 py-10 shadow-lg backdrop-blur-md max-sm:px-8">
        <div className="text-white">
          <div className="mb-8 flex flex-col items-center">
            <img
              className="rounded-full shadow-lg"
              src="/logo512.png"
              width="150"
              alt="Avatar"
            />
            <h1 className="mb-2 text-2xl">Leaky Ships</h1>
            <span className="text-gray-300">Logging out...</span>
          </div>
          <FontAwesomeIcon
            className="my-16 mx-24 animate-spin text-6xl"
            icon={faSpinnerThird}
          />
        </div>
      </div>
    </div>
  )
}

export default Logout
