<template>
  <component :is="type" v-bind="actualProps()" class="Button">
    {{ label }}
  </component>
</template>

<script setup lang="ts">

type Props = {
  type ?: 'a' | 'button'
  href ?: string
  label : string
}

const {
  type = 'a',
  href,
  label,
} = defineProps<Props>()

const actualProps = () => {
  if (type === 'a') {
    return {
      href: href,
      target: href!.startsWith('https://') ? '_blank' : undefined,
    }
  }
}
</script>
