import { useGameItems } from "@/context/GameItemsContext";
import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Player from "./Lobby/Player";
import SlotList from "./Lobby/SlotList";

const Lobby = () => {
	const { player } = useGameItems();
	const navigate = useNavigate();
	const { token } = player;

	function onLoad() {
		if (!token) {
			navigate(`/`);
			return;
		}
	}

	useEffect(() => {
		onLoad();
	}, []);

	return (
		<div style={pageStyle}>
			<Player />
			<div style={contentStyle}>
				<SlotList />
			</div>
		</div>
	);
};

export default Lobby;

const pageStyle: React.CSSProperties = {
	height: "100%",
	display: "flex",
	flexDirection: "column",
	overflow: "hidden",
};

const contentStyle: React.CSSProperties = {
	flex: 1,
	minHeight: 0,
	display: "flex",
	flexDirection: "column",
	padding: "16px 20px 20px",
};
