<script setup lang="ts">
// https://router.vuejs.org/guide/advanced/extending-router-link.html
// https://vueschool.io/articles/vuejs-tutorials/extending-vue-router-links-in-vue-3/

import { RouterLink } from 'vue-router'
import { computed } from 'vue'

const props = defineProps({
  ...RouterLink.props, // @ts-ignore
  blank: {
    type: Boolean,
    default: false,
  },
})

const isExternalLink = computed(() => typeof props.to === 'string' && props.to.startsWith('http'))
</script>

<template>
  <div>
    <a v-if="isExternalLink" :target="props.blank ? '_blank' : '_self'" rel="noopener" :href="props.to">
      <slot />
    </a>
    <router-link v-else :target="props.blank ? '_blank' : '_self'" rel="noopener" v-bind="props">
      <slot />
    </router-link>
  </div>
</template>
