---
import Button from "./ui/Button.astro";
import { Icon } from "astro-icon/components";

import { createTranslator } from "../i18n/index.ts";
const tl = createTranslator(Astro.currentLocale);
const currentLocale = Astro.currentLocale;

const { locale } = Astro.params;

---

<div>
  <div class="flex justify-between px-8 md:px-0 md:py-4">
    <div class="border-l-4 border-colorPrimary pl-4">
      <p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-2xl md:text-lg">
        <a href={`/${currentLocale}`}>{tl("nav.logo_line1")}<br/>{tl("nav.logo_line2")}</a>
      </p>
    </div>
    <nav
      class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
    >
      <div class="hidden md:flex gap-8 font-primary font-bold">
        <a class="hover:text-colorPrimary transition" href=`/${locale}#somos`>{tl("nav.about")}</a>
        <a class="hover:text-colorPrimary transition" href=`/${locale}#programs`>{tl("nav.programs")}</a>
        <a class="hover:text-colorPrimary transition" href=`/${locale}#news`>{tl("nav.news")}</a>
      </div>
      <div class="drawer lg:hidden">
        <input id="my-drawer-1" type="checkbox" class="drawer-toggle" />
        <div class="drawer-content">
          <!-- Page content here -->
          <label for="my-drawer-1" class="btn-ghost drawer-button"><Icon name="ph:list" class="text-white text-4xl font-bold" /></label>
        </div>
        <div class="drawer-side">
          <label for="my-drawer-1" aria-label="close sidebar" class="drawer-overlay"></label>
          <ul class="menu min-h-full w-80 p-4 bg-[url(/img/mid-logo-2.webp)] bg-no-repeat bg-contain bg-center bg-[#22523F] text-white">
            <!-- Sidebar content here -->
             <div class="flex gap-2 justify-center items-center mb-8 mt-8">
              <img class="w-1/3 object-contain" src="/img/logo-metalico.webp" alt="Logo Centro del Reino de Paz y Justicia" />
                <p class="font-secondary text-colorPrimary font-bold leading-none py-2 text-lg ">
                  <a href="/">{tl("nav.logo_line1")}<br/>{tl("nav.logo_line2")}</a>
                </p>
                
             </div>
              
              <div class="font-primary font-bold flex flex-col gap-1 text-lg p-0">
                <li><a><a class="hover:text-colorPrimary transition" href="#somos">{tl("nav.about")}</a></a></li>
                <li><a><a class="hover:text-colorPrimary transition" href="#programs">{tl("nav.programs")}</a></a></li>
                <li><a><a class="hover:text-colorPrimary transition" href="#news">{tl("nav.news")}</a></a></li>
              </div>
            <div class="w-50">
              <Button class="px-8 py-2 uppercase text-lg mt-8" title={tl("nav.contact")} url="#contact" variant="primary" />
            </div>
            <div class="dropdown mt-10">
            <div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div>
            <ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm">
              <li><a href="/es">🇪🇸 Español</a></li>
              <li><a href="/en">🇬🇧 English</a></li>
            </ul>
          </div>
          </ul>
        </div>
      </div>
      <div class="w-50 hidden md:block">
        <Button class="px-4 py-2 uppercase" title={tl("nav.contact")} url="#contact" variant="primary" />
      </div>
      <div class="dropdown dropdown-end lg:block hidden">
        <div tabindex="0" role="button" class="btn-ghost m-1 cursor-pointer"><Icon name="ph:translate" class="text-2xl" /></div>
        <ul tabindex="-1" class="dropdown-content text-tertiary text-lg bg-colorPrimary menu z-1 w-52 p-2 shadow-sm">
          <li><a href="/es">🇪🇸 Español</a></li>
          <li><a href="/en">🇬🇧 English</a></li>
        </ul>
      </div>
    </nav>
  </div>
</div>