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

<script setup lang="ts">

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

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

const isExternal = href.startsWith('http')

const actualComponent = computed(() => {
  if (type === 'NuxtLink') return resolveComponent('NuxtLink')
  return type
})

const actualProps = () => {
  if (type === 'NuxtLink') {
    return {
      to: href,
      target: isExternal ? '_blank' : undefined,
      external: isExternal,
    }
  }
}
</script>
