import { observer } from "mobx-react-lite";
import { MenuView } from "./MenuView";
import { state } from "../state";
import { Panel } from "./Panel";

export const LeftPanel = observer(function () {
    const isGame = state.game && !state.game.isPaused;

    if (isGame)
        return null;

    // function handleLoadWorld(): void {
    //     state.world.load();
    // }

    function handleLoadMockWorld(): void {
        state.world.loadMock();
    }

    return <Panel side='left'>
        <MenuView />
        <div className="gap" />
        {/* <button onClick={handleLoadWorld}>Load</button> */}
        <button onClick={handleLoadMockWorld}>Load mock world</button>
    </Panel>;
});