---
const headerLinks = [
  {
    label: "About",
    href: "/about",
    icon: "fa-solid fa-user", // font awesome css class
  },
  {
    label: "/now",
    href: "/now",
    icon: "fa-solid fa-calendar-days",
  },
  {
    label: "Projects",
    href: "/projects",
    icon: "fa-solid fa-folder",
  },
  {
    label: "Notes",
    href: "/notes",
    icon: "fa-solid fa-sticky-note",
  },
  {
    label: "Blog",
    href: "/blog",
    icon: "fa-solid fa-signature",
  },
  {
    label: "Contact",
    href: "/contact",
    icon: "fa-solid fa-envelope",
  },
  {
    label: "More",
    href: "/more",
    icon: "fa-solid fa-bars",
  },
];
---

<nav class="flex flex-row flex-wrap gap-4 md:flex-nowrap text-balance">
  {
    headerLinks.map((link) => (
      <span class="">
        <i class={`${link.icon} mr-0.5 text-sm`} />
        <a
          href={link.href}
          aria-current={Astro.url.pathname === link.href ? "page" : undefined}
          class="underline decoration-wavy underline-offset-4 decoration-1.5
        decoration-light-pu dark:decoration-dark-pu"
        >
          {link.label}
        </a>
      </span>
    ))
  }
  <a href="/meta/subscribe"><i class="fa-solid fa-rss text-light-or dark:text-dark-or"></i></a>
</nav>