---
const links = [
  { href: '/', text: 'Home' },
  { href: '/blog', text: 'Blog' },
  { href: '/portafolio', text: 'Portafolio' },
  { href: '/curriculum', text: 'Curriculum' },
  { href: '/contact', text: 'Contact' },
];

// TODO: Fix so the "active" class can come from the server so it doesnt flicker
---

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <ul class="list-unstyle hstack">
    {
      links.map((link) => (
        <li class="nav-item">
          <a class="nav-link" href={link.href}>
            {link.text}
          </a>
        </li>
      ))
    }
  </ul>
</nav>

<script>
  // Add active class to the current link
 const link = document.querySelector(`a[href='${location.pathname}']`);

 if (link) {
   link.classList.add("active");
 }

</script>

<style>
  nav {
    width: fit-content;
  }

  li > a {
    padding: 0.25rem 0.5rem;
  }

  a {
    --boder-color: transparent;
    color: var(--prj-link-text);
    border: 1px solid var(--boder-color);
    border-radius: 4px;
    text-decoration: none;

    transition: background-color 200ms, color 200ms;
  }

  a.active {
    border: 1px solid var(--prj-accent-bg);
  }

  a:hover {
    --border-color: var(--prj-accent-bg);
    background-color: var(--prj-accent-bg);
    color: var(--prj-accent-text);
    border: 1px solid var(--border-color);
  }
</style>