<template>
  <component :is="type" v-bind="actualProps()" class="Button" :class="[design]">
    <slot />
  </component>
</template>

<script setup lang="ts">

type Props = {
  type ?: 'a' | 'button'
  href ?: string
  design ?: 'default' | 'dark' | 'white'
}

const {
  type = 'a',
  href = '#',
  design = 'default',
} = defineProps<Props>()

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