import { useHordeState } from "../contexts/state";
import styles from "../assets/navbar.module.css";

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

    return (
        <nav class={styles.navbar}>
            <span class={styles.title}>Horde Overseer</span>
            <div class={styles.actions}>
                <button onClick={leaderboard.setTrue}>Leaderboard</button>
                <button onClick={options.setTrue}>Options</button>
                {state.user?.worker_ids && (
                    <button onClick={manageWorkers.setTrue}>Manage Workers</button>
                )}
            </div>
        </nav>
    );
};
