import { Show, createSignal } from "solid-js";

const [mobileNav, showMobileNav] = createSignal(false);

const setShowMobileNav = () => {
  console.log("herre");
  
  showMobileNav(!mobileNav())
};

export const Navigation = () => {
  return (
    <>
    <meta charset="UTF-8" />
      <Show when={mobileNav()}>
        <div class={`fixed transition-all z-30 h-screen w-screen bg-zinc-900 flex flex-col`}>
          <div class="w-screen border-b-2 border-b-zinc-50 h-14 bg-zinc-900 flex items-center">
            <button class="h-full w-auto aspect-square hover:bg-zinc-700" onclick={() => setShowMobileNav()}>
              <img class="ml-4 h-5 w-5" src="/img/x.svg" alt="" />
            </button>
          </div>
          <div class="flex-1 flex justify-center items-center">
            <div class="h-1/3 items-center my-auto text-zinc-50  flex flex-col font-mono font-bold text-3xl justify-around">
              <a class="hover:underline transition-all hover:text-zinc-50" href="/">
                Home
              </a>

              <a class="hover:underline transition-all hover:text-zinc-50" href="/projects">
                Projekte
              </a>
              <a class="hover:underline transition-all hover:text-zinc-50" href="/products">
                Produkte
              </a>
              <a class="hover:underline transition-all hover:text-zinc-50" href="/mystory/">
                &#220;ber Mich
              </a>
              <a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
                Skills
              </a>
            </div>
          </div>
        </div>
      </Show>
      <nav class="md:hidden h-14 w-screen bg-emerald-500 flex items-center">
        <button onclick={() => setShowMobileNav()}>
          <img class="ml-4" src="/img/menu.svg" alt="" />
        </button>
      </nav>
      <nav class="max-md:hidden h-14 w-screen  bg-emerald-500 text-zinc-900 font-mono text-xl flex justify-around items-center font-bold">
        <a class="hover:underline transition-all hover:text-zinc-50" href="/">
          Home
        </a>

        <a class="hover:underline transition-all hover:text-zinc-50" href="/projects">
          Projekte
        </a>
        <a class="hover:underline transition-all hover:text-zinc-50" href="/products">
          Produkte
        </a>
        <a class="hover:underline transition-all hover:text-zinc-50" href="/mystory">
          &#220;ber Mich
        </a>
        <a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
          Skills
        </a>
      </nav>
    </>
  );
};
