---
import { Menu, X } from 'lucide-astro';

import { LoginButton } from '../auth/login-button.tsx';
import HeaderLink from './header-link.astro';
---

<header>
  <div class="flex justify-between items-center mx-auto px-4 py-6 container">
    <div class="font-bold text-lg">
      <a href="/" class="flex items-center text-gray-900 hover:text-gray-700">
        DashHub.ai
      </a>
    </div>

    <!-- Desktop menu -->
    <nav class="md:flex items-center space-x-10 hidden">
      <HeaderLink href="/">
        Home
      </HeaderLink>

      <HeaderLink href="/blog">
        Blog
      </HeaderLink>

      <HeaderLink href="/about">
        About
      </HeaderLink>

      <!-- <HeaderLink href="/pricing">
        Pricing
      </HeaderLink> -->

      <HeaderLink href="https://github.com/DashHub-ai/DashHub" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
          <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.11.82-.26.82-.577v-2.165c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.745.083-.73.083-.73 1.205.085 1.84 1.24 1.84 1.24 1.07 1.835 2.807 1.305 3.492.997.108-.775.42-1.305.763-1.605-2.665-.305-5.466-1.335-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.305-.535-1.54.117-3.205 0 0 1.008-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.138 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.665.24 2.9.118 3.205.77.84 1.235 1.91 1.235 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.217.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" />
        </svg>
      </HeaderLink>

      <div class="flex flex-row gap-4 h-[40px]">
        <LoginButton client:only="react" />
      </div>
    </nav>

    <!-- Mobile menu -->
    <div class="relative md:hidden">
      <button id="menu-button" class="text-gray-900 hover:text-gray-700 focus:outline-none" aria-label="Menu">
        <Menu class="w-6 h-6" />
      </button>

      <div id="mobile-menu" class="z-50 fixed inset-0 flex flex-col justify-center items-center space-y-4 hidden bg-white">
        <button id="close-menu" class="top-4 right-4 absolute text-gray-900 hover:text-gray-700 focus:outline-none">
          <X class="w-6 h-6" />
        </button>

        <HeaderLink href="/">
          Home
        </HeaderLink>

        <HeaderLink href="/blog">
          Blog
        </HeaderLink>

        <HeaderLink href="/about">
          About
        </HeaderLink>

        <!-- <HeaderLink href="/pricing">
          Pricing
        </HeaderLink> -->

        <HeaderLink href="https://github.com/DashHub-ai/DashHub" target="_blank">
          Github
        </HeaderLink>
      </div>
    </div>

    <script>
      document.getElementById('menu-button')!.addEventListener('click', function() {
        const menu = document.getElementById('mobile-menu');
        const body = document.body;

        menu!.classList.remove('hidden');
        body.classList.add('overflow-hidden');
      });

      document.getElementById('close-menu')!.addEventListener('click', function() {
        const menu = document.getElementById('mobile-menu');
        const body = document.body;

        menu!.classList.add('hidden');
        body.classList.remove('overflow-hidden');
      });
    </script>
</header>
