<template>
  <component
    :is="type === 'internal' ? 'router-link' : 'a'"
    :[attributeName]="href"
    :class="color"
    :target="type === 'internal' ? '_self' : '_target'"
    :data-test-name="dataTestName"
    class="vc-hyper-link no-underline inline-flex justify-center items-center pb-0.156 border-b border-solid"
  >
    <i
      v-if="icon"
      class="vc-hyper-link-icon icon-xs"
      :class="[icon, color]"
    />
    <span
      class="vc-hyper-link-text text-xs not-italic font-normal"
      :class="{ 'icon-margin': icon }"
    >
      <slot />
    </span>
  </component>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { VcHyperLinkType, VcHyperLinkColor } from './VcHyperLink.types'

export default defineComponent({
  name: 'VcHyperLink',
  props: {
    icon: {
      type: String,
      default: ''
    },
    href: {
      type: String,
      default: ''
    },
    type: {
      type: String as PropType<VcHyperLinkType>,
      default: 'internal'
    },
    color: {
      type: String as PropType<VcHyperLinkColor>,
      default: 'primary'
    },
    dataTestName: {
      type: String,
      default: 'default'
    }
  },
  computed: {
    attributeName () {
      return this.type === 'internal' ? 'to' : 'href'
    }
  }
})
</script>

<style lang="scss" scoped>
.primary {
  @apply text-primary-actions border-active-elements;
}
.secondary {
  @apply text-secondary-actions border-secondary-actions;
}
.destructive {
 @apply text-destructive-actions border-destructive-actions;
}
.icon-margin {
  @apply ml-1;
}
[dir='rtl'] .icon-margin {
  @apply mr-1 ml-0;
}
</style>
