<style scoped src="./Button.css"/>

<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 props = withDefaults(defineProps<Props>(), {
  type : 'a'
})

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