import { GameItemsContext } from "@/context/GameItemsContext";
import { Layout } from "antd";
import { useContext, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import Player from "../components/Lobby/Player";
import SlotList from "../components/Lobby/SlotList";

const { Content, Sider } = Layout;

export default function LobbyPage() {
	const { player } = useContext(GameItemsContext);
	const navigate = useNavigate();
	const { token } = player;

	useEffect(() => {
		if (!token) {
			navigate("/login"); // 沒 token 導回登入
		}
	}, [token, navigate]);

	return (
		<Layout style={{ height: "100vh" }}>
			<Sider
				width={300}
				style={{
					background: "#f7f7f7",
					padding: "24px 16px",
					boxShadow: "2px 0 5px rgba(0,0,0,0.1)",
				}}
			>
				<Player />
			</Sider>

			<Layout>
				<Content style={{ padding: "16px", background: "#ffffff" }}>
					<SlotList />
				</Content>
			</Layout>
		</Layout>
	);
}
