import { faCirclePlus } from "@fortawesome/pro-regular-svg-icons";
import { JSX, Show, Suspense } from "solid-js";
import "../styles/components/NavBar.scss";
import { FontAwesomeIcon } from "./FontAwesomeIcon";
import NavUser from "./NavUser";

export function Li(props: {
  href: string;
  action?: () => void;
  name?: string;
  children?: JSX.Element;
}) {
  return (
    <li class="navElem flex-row thick">
      <a
        class="flex-row"
        href={props.href}
        onClick={() => props.action && props.action()}
      >
        {props.children ?? <></>}
        <Show when={props.name}>
          <span>{props.name}</span>
        </Show>
      </a>
    </li>
  );
}

function NavBar() {
  return (
    <nav class="flex-row responsive">
      <ul class="flex-row responsive thick">
        <Li href="/" name="li'l Judd">
          <img src="/assets/logox256.png" alt="The Bots Logo" />
        </Li>
        <Li href="/features" name="Features" />
        <Li href="/how-do-i" name="How do I...?" />
        <Li href="/stack" name="The Stack" />
        <Li href="/about" name="About" />
      </ul>
      <ul class="flex-row responsive thick">
        <Li
          href="https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=18977581952080&scope=bot"
          name="Invite to your server"
        >
          <FontAwesomeIcon class="lower" icon={faCirclePlus} size="xl" />
        </Li>
        <Suspense>
          <NavUser />
        </Suspense>
      </ul>
    </nav>
  );
}

export default NavBar;