<template>
  <a :href="href" target="_blank" data-disable-navigate="true">
    <button v-if="buttonColor" :class="`btn-sm ${outline ? 'btn-outline-' : 'btn-'}${buttonColor}`">
      <slot></slot>
      <font-awesome-icon :icon="icon"/>
    </button>
    <template v-else>
      <slot></slot>
      <font-awesome-icon :icon="icon"/>
    </template>
  </a>
</template>
<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'

export default {
  name: 'ExternalLink',
  components: { FontAwesomeIcon },
  props: {
    href: {
      type: String,
      required: true
    },
    buttonColor: String,
    outline: Boolean
  },
  computed: {
    icon () {
      return faExternalLinkAlt
    }
  }
}
</script>
