import { A } from "@solidjs/router";
import { JSXElement, Show, useContext } from "solid-js";

import { LoginContext } from "../Context/GlobalState";
import { Home, Plus } from "../Util/Icons";

// Represents a single list item in the menu bar
export function MenuItem(props: {
  href: string;
  children: JSXElement;
}): JSXElement {
  return (
    <li>
      <A class="justify-center" href={props.href} end>
        {props.children}
      </A>
    </li>
  );
}

// Represents the menu bar at the top of the page
export function Menu(): JSXElement {
  const login_ctx = useContext(LoginContext)!;
  return (
    <Show when={login_ctx.loggedIn()}>
      <ul class="menu space-y-2 rounded-box md:menu-horizontal md:space-x-2 md:space-y-0">
        <MenuItem href="/">
          <Home />
        </MenuItem>
        <MenuItem href="/new">
          <Plus />
        </MenuItem>
      </ul>
    </Show>
  );
}