---
const { url, name } = Astro.props

interface Props {
  url: string
  name: string
}
---

<a
    id={url === '/' ? 'home' : url.replace('/', '')}
    href={url}
    data-astro-prefetch
    class="rounded-lg text-base font-medium text-neutral-600 outline-none ring-zinc-500 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-500 dark:focus:outline-none md:py-3 md:text-sm 2xl:text-base"
>
  {name}
</a>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    let url = window.location.pathname;
    let urlSegments = url.split("/");
    let navId;

    if (url === "/") {
      navId = "home";
    } else {
      navId = url.replace("/", "");
    }

    let nav = document.getElementById(navId);

    if (nav) {
      nav.classList.remove(
        "text-neutral-600",
        "dark:text-neutral-400",
        "hover:text-neutral-500",
        "dark:hover:text-neutral-500"
      );
      nav.classList.add("text-orange-400", "dark:text-orange-300");
      nav.setAttribute("aria-current", "page");
    }
  });
</script>