import { Title } from "@common/components/Title";
import { useHordeState } from "../contexts/state";
import { Navbar } from "./navbar";
import { StatsPanel } from "./stats-panel";
import { WorkersPanel } from "./workers-panel";
import { LeaderboardModal } from "./modals/leaderboard-modal";
import { OptionsModal } from "./modals/options-modal";
import { ManageWorkersModal } from "./modals/manage-workers-modal";
import styles from "../assets/app.module.css";

export const App = () => {
    const { leaderboard, options, manageWorkers } = useHordeState();

    return (
        <div class={styles.root}>
            <Title>Horde Overseer</Title>
            <Navbar />
            <div class={styles.body}>
                <StatsPanel />
                <WorkersPanel />
            </div>
            <LeaderboardModal open={leaderboard.value} onClose={leaderboard.setFalse} />
            <OptionsModal open={options.value} onClose={options.setFalse} />
            <ManageWorkersModal open={manageWorkers.value} onClose={manageWorkers.setFalse} />
        </div>
    );
};
