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

<script setup lang="ts">

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

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

const isExternal = computed(() => href?.startsWith('http'))

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

const actualProps = computed(() => {
  if (!href) return

  return {
    to: href,
    target: isExternal.value ? '_blank' : undefined,
    external: isExternal.value,
  }
})
</script>
