---
interface NavRoute {
  path: string;
  name: string;
}

const navRoutes: NavRoute[] = [
  { path: "/", name: "Home" },
  { path: "/about", name: "About me" },
  { path: "/work", name: "My work" },
  { path: "/contact", name: "Contact" },
];

const isCurrentRoute = (navRoute: NavRoute) => Astro.url.pathname == navRoute.path;
---

<nav class="text-md pb-6 pt-2 sm:text-lg print:hidden">
  <ul class="flex flex-wrap justify-center gap-x-4 gap-y-6 py-6 tracking-wide sm:gap-x-5 sm:gap-y-8">
    {
      navRoutes.map((route) => (
        <li>
          <a
            href={route.path}
            class:list={[
              "rounded border px-6 py-2 uppercase transition-colors hover:underline focus:underline motion-reduce:transition-none sm:px-8 sm:py-3",
              isCurrentRoute(route)
                ? "border-bm-500 text-bm-500 dark:border-bm-400 dark:text-bm-400"
                : "border-stone-600 text-stone-600 hover:border-bm-500 hover:text-bm-500 focus:border-bm-500 focus:text-bm-500 dark:border-zinc-300 dark:text-zinc-300 dark:hover:border-bm-400 dark:hover:text-bm-400 dark:focus:border-bm-400 dark:focus:text-bm-400",
            ]}
            aria-current={isCurrentRoute(route) ? "page" : undefined}
          >
            {route.name}
          </a>
        </li>
      ))
    }
  </ul>
</nav>