---
import { de, en } from "~/config"
import { getLangFromUrl, useTranslations } from "~/i18n/utils"

const lang = getLangFromUrl(Astro.url)
const t = useTranslations(lang)

const { home, archive, custom, links, about } =
  lang === "de" ? de.navigation : en.navigation

  const linkClasses = `nav-links inline-block hover:underline hover:underline-offset-4 text-blue-700 dark:text-amber-400`
---

<nav>
  <div class="flex flex-row flex-wrap gap-4 text-lg">
    {
      home && (
        <a
          href={`/${lang}`}
          class={linkClasses}
          aria-label={t("nav.home")}
          title={t("nav.home")}
          data-astro-prefetch="viewport"
        >
          {t("nav.home")}
        </a>
      )
    }
    {
      archive && (
        <a
          href={`/${lang}/archive`}
          class={linkClasses}
          aria-label={t("nav.archive")}
          title={t("nav.archive")}
          data-astro-prefetch="viewport"
        >
          {t("nav.archive")}
        </a>
      )
    }
  </div>
  <div class="flex flex-row flex-wrap gap-4 text-lg pt-1">
    {
      custom?.map((tab) => (
        <a
          href={tab.link}
          class={linkClasses}
          target="_blank"
          aria-label={tab.label}
          title={tab.label}
          data-astro-prefetch="viewport"
        >
          {tab.label}
        </a>
      ))
    }
  </div>
  
  {
    links && (
      <a
        href={`/${lang}/links`}
        class={linkClasses}
        aria-label={t("nav.links")}
        title={t("nav.links")}
        data-astro-prefetch="viewport"
      >
        {t("nav.links")}
      </a>
    )
  }
  {
    about && (
      <a
        href={`/${lang}/about`}
        class={linkClasses}
        aria-label={t("nav.about")}
        title={t("nav.about")}
        data-astro-prefetch="viewport"
      >
        {t("nav.about")}
      </a>
    )
  }
</nav>