---
const pathname = new URL(Astro.request.url).pathname;
const currentPath = pathname.slice(1);

const links = [
  { name: "Home", href: "/", path: "" },
  { name: "About", href: "/about", path: "about" },
  { name: "Projects", href: "/projects", path: "projects" },
  { name: "Writing", href: "/writing", path: "writing" },
];

const isPathActive = (currentPath: string, pathToCheck: string) => {
  if (pathToCheck === "") {
    return currentPath === pathToCheck;
  }
  return currentPath.startsWith(pathToCheck);
};
---

<style>
  .nav-links {
    display: flex;
    gap: 0.5rem;
  }

  a {
    display: flex;
    align-items: center;
    position: relative;
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--navigation-underline-off);
    transition: text-decoration-color 200ms cubic-bezier(0.4, 0, 0.2, 1);

    &:hover,
    &:active,
    &.active {
      text-decoration-color: var(--navigation-underline);
    }
  }
</style>

<div class="nav-links">
  {
    links.map(({ name, href, path }) => {
      return (
        <a
          href={href}
          class:list={[
            {
              active: isPathActive(currentPath, path),
            },
          ]}
        >
          {name}
        </a>
      );
    })
  }
</div>