---
import path from "../utils/path.ts"
import {Users, List, Info, CalendarDays, type AstroComponent} from "@lucide/astro"

const route = Astro.url.pathname


const events: Record<string, Array<{
    name: string,
    path: string,
    icon: AstroComponent,
}>> = {
    "fallback": [
        {
            name: "Hamburg 2026",
            path: "/hamburg/2026/",
            icon: CalendarDays,
        },
    ],
    "/meta": [],
    "/hamburg/2026": [
        {
            name: "Wann & Wo",
            path: "/hamburg/2026/",
            icon: Info,
        },
        {
            name: "Programm",
            path: "/hamburg/2026/programm",
            icon: List,
        },
        {
            name: "Wer",
            path: "/hamburg/2026/wer",
            icon: Users,
        },
    ],
}

const currentEventPath = Object.keys(events).filter(event => route.startsWith(path(import.meta.env.BASE_URL, event)))[0]

const event = events[currentEventPath] ?? events["fallback"]
---

<div class="navbar bg-base-100 shadow-sm z-50 h-20 sticky top-0 left-0 w-screen">
  <div class="navbar-start w-fit max-h-14">
    <div class="dropdown">
      <div tabindex="0" role="button" class="btn btn-ghost sm:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/>
        </svg>
      </div>
      <ul
          tabindex="-1"
          class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-4 gap-4 shadow-xl border">
          {
              event.map(item =>
                  <li>
                    <a class="text-xl" href={path(import.meta.env.BASE_URL, item.path)}>
                      <item.icon />
                        {item.name}
                    </a>
                  </li>,
              )
          }
      </ul>
    </div>
    <a class="btn btn-link text-xl max-h-14" href={path(import.meta.env.BASE_URL, "/")}>
      <picture class="h-full">
        <img src={path(import.meta.env.BASE_URL, "/logo.svg")} alt="Logo von den DiDays 2026 in Hamburg"
             class="h-full"/>
      </picture>
    </a>
  </div>
  <div class="navbar-center hidden sm:flex">
    <ul class="menu menu-horizontal px-1 gap-2">
        {
            event.map(item =>
                <li>
                  <a href={path(import.meta.env.BASE_URL, item.path)}>
                    <item.icon />
                      {item.name}
                  </a>
                </li>,
            )
        }
    </ul>
  </div>
</div>