<template>
  <NuxtLink :to="to" class="internal-link">
    <span>{{ text }}</span>
    <span v-if="arrow" class="internal-link-arrow" aria-hidden="true">&rarr;</span>
  </NuxtLink>
</template>

<script setup>
defineProps({
  to: { type: String, required: true },
  text: { type: String, required: true },
  arrow: { type: Boolean, default: true },
})
</script>

<style lang="less" scoped>
.internal-link {
  display: inline-flex;
  align-items: center;
  gap: @space-sm;
  font-size: @font-size-base;
  color: @color-primary;
  text-decoration: none;
  font-weight: @font-weight-medium;
  transition: gap @transition-fast;

  &:hover {
    gap: @space-md;
    color: @color-primary-light;
  }
}

.internal-link-arrow {
  font-size: @font-size-lg;
  transition: transform @transition-fast;
}
</style>
