// src/pages/Home/Home.jsx
// Régi PlayMenu-s oldal, "Home" néven

import { useEffect } from "react"
import useRequireAuth from "../../hooks/useRequireAuth"
import Navbar from "../../components/Navbar/Navbar"
import Footer from "../../components/Footer/Footer.jsx"
import Background from "../../assets/backgrounds/Background.jsx"
import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"

export default function Home() {
  // a hook inicializálja a user-t a localStorage-ból és visszaadja a state-et + settert
  const [user, setUser] = useRequireAuth({ redirect: false }) // no redirect on unauthenticated visitors

  // Dummy callbackok és user példa
  const handleJoinGame = (code) => {
    alert(`Csatlakozás játékhoz: ${code}`)
  }
  const handleCreateGame = () => {
    alert("Új játék létrehozása")
  }
  const userObj = { name: user }

  // ha szükséges a user módosítása máshol: setUser("újnév") automatikusan menti localStorage-be

  return (
    <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
      <div className="fixed inset-0 -z-10 pointer-events-none">
        <Background />
      </div>
      <div className="fixed top-0 left-0 right-0 z-30">
        <Navbar />
      </div>
      <main className="flex-1 min-h-[calc(100vh-64px)] flex mt-[64px] flex-col items-center justify-center">
        <PlayMenu
          onJoinGame={handleJoinGame}
          onCreateGame={handleCreateGame}
          user={userObj}
          setUser={setUser}
        />
        {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
      </main>
      <Footer />
    </div>
  )
}