---
import { useTranslations, useTranslatedPath } from "../i18n/utils";
import Logo from "./Logo.astro";
import ToggleTheme from "@components/ThemeToggle.svelte";

function isActive(path: string) {
  return Astro.url.pathname === path;
}

const t = useTranslations(Astro.url);
const translatePath = useTranslatedPath(Astro.url);

const paths = [
  {
    link: translatePath("/blog"),
    text: t("nav.blog"),
  },
  {
    link: translatePath("/projects"),
    text: t("nav.projects"),
  },
  {
    link: translatePath("/photos"),
    text: t("nav.photos"),
  },
  {
    link: translatePath("/videos"),
    text: t("nav.videos"),
  },
];
---

<ul class="flex my-4 h-12 bg-dark">
  <li><a href="#main-content" class="skip-link">Skip to main content</a></li>
  <li
    class="border-none bg-transparent my-2 mr-4 logo grid place-content-center"
  >
    <a
      href={translatePath("/")}
      class="text-neutral h-9 flex items-center justify-center lowercase"
    >
      <Logo />
    </a>
  </li>
  {
    paths.map(({ link, text }, i) => (
      <li
        class={`
          flex items-center flex-1 border-t-1 border-b-1 border-neutral
          ${isActive(link) ? "bg-light underline" : "bg"}
          ${i === 0 ? "rounded-bl-md border-l-1" : "border-l-1"}
          ${i === paths.length - 1 ? "rounded-tr-md !border-r-1" : ""}
        `}
      >
        <a
          class="text-neutral w-full h-full flex items-center justify-center lowercase"
          href={link}
          data-astro-prefetch
        >
          {text}
        </a>
      </li>
    ))
  }
  <li class="w-8 h-6 flex justify-right items-center h-full">
    <ToggleTheme client:load />
  </li>
</ul>

<style>
  ul > li.logo {
    background: none;
    flex: 0;
    margin-left: 0px;
    --fill: #cb5a5a;
    --background-fill: none;
  }
  /* Visually hide the jump to content button while making it accessible */
  .skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* Make the jump to content button visible when focused */
  .skip-link:focus {
    position: absolute;
    left: 0;
    width: auto;
    height: auto;
    overflow: visible;
  }
</style>