<template>
  <component :is="type" v-bind="linkProps">
    <slot></slot>
  </component>
</template>

<script>
import { isExternal } from '@/utils/validate'

export default {
  props: {
    to: {
      type: String,
      required: true,
    },
  },
  computed: {
    type() {
      return isExternal(this.to) ? 'a' : 'router-link'
    },
    linkProps() {
      return isExternal(this.to)
        ? {
          href: this.to,
          target: '_blank',
          rel: 'noopener',
        }
        : { to: this.to }
    },
  },
}
</script>
