<script>
  import { click } from "$lib/util.js";
  import { page } from "$app/stores";

  let { link, children } = $props();
</script>

<a
  class={$page.url.pathname === link ? "active" : "inactive"}
  data-sveltekit-preload-data
  onclick={click}
  href={link}
>
  {@render children()}
</a>

<style>
  a {
    font-weight: 600;
    font-size: var(--size-3);

    color: var(--white-1);
    text-decoration: none;
    text-decoration-color: var(--color);
  }

  a:hover {
    color: var(--color);
    text-decoration: underline;
  }

  .active {
    color: var(--color);
  }
</style>
