---
import { GLOBAL } from "../lib/variables";
import Anchor from "./common/Anchor.astro";
import ThemeToggle from "./ThemeToggle.astro";
---

<header
  class="zag-bg zag-border-b zag-transition sticky top-0 w-full z-10"
>
  <div
    class="zag-bg zag-transition sm:hidden relative z-50 py-4 flex items-center"
  >
    <button class="px-4" aria-label="Toggle navigation menu">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 512 512"
        class="zag-fill zag-transition"
      >
        <path d="M80 96h352v32H80zm0 144h352v32H80zm0 144h352v32H80z"></path>
      </svg>
    </button>
  </div>
  <nav
    class="zag-bg zag-border-b zag-transition fixed sm:relative inset-x-0 top-0 h-auto sm:px-4 flex justify-between flex-col gap-8 py-4 text-xl sm:flex-row max-w-2xl mx-auto sm:pt-4 sm:border-none"
  >
    <div
      class="flex flex-col font-mono font-medium gap-4 sm:flex-row px-4 sm:px-0 mt-16 sm:mt-0"
    >
    {Object.entries(GLOBAL.menu).map((i) => (
      <Anchor url={i[1]}>{i[0]}</Anchor>
    ))}
    </div>
    <div class="flex gap-2 justify-between px-2 sm:px-0">
      <div class="rss-container">
        <a 
          href="/rss.xml" 
          aria-label="RSS Feed" 
          class="rss-button zag-interactive"
        >
          <svg 
            xmlns="http://www.w3.org/2000/svg" 
            width="24" 
            height="24" 
            viewBox="0 0 24 24" 
            class="theme-icon rss-icon"
            aria-hidden="true"
          >
            <path
              class="zag-fill zag-transition"
              d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
            />
          </svg>
        </a>
      </div>
      <ThemeToggle />
    </div>
  </nav>
</header>

<script>
  const button = document.querySelector("button");
  const nav = document.querySelector("nav");
  let isOpen = false;

  function updateNavState() {
    const isMobile = window.matchMedia("(max-width: 640px)").matches;
    if (isMobile) {
      nav!.style.transform = isOpen ? "translateY(0)" : "translateY(-100%)";
    } else {
      nav!.style.transform = "translateY(0)";
      isOpen = false;
    }
  }

  function toggleNav() {
    isOpen = !isOpen;
    updateNavState();
  }

  button?.addEventListener("click", toggleNav);
  window.addEventListener("resize", updateNavState);

  updateNavState();
</script>

<style>
  .rss-container {
    position: relative;
  }
  
  .rss-button {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }
  
  .rss-button:hover {
    background-color: rgba(128, 128, 128, 0.1);
    border-color: rgba(128, 128, 128, 0.2);
  }
  
  .rss-icon {
    width: 24px;
    height: 24px;
  }