<template>
  <component
    :is="componentTag"
    :type="componentType"
    :class="['btn', variantClass, fullWidth ? 'w-full' : '']"
    v-bind="$attrs"
  >
    <slot />
  </component>
</template>

<script setup lang="ts">
const props = defineProps({
  variant: {
    type: String,
    default: 'primary',
  },
  type: {
    type: String,
    default: 'button',
  },
  fullWidth: {
    type: Boolean,
    default: false,
  },
  as: {
    type: [String, Object],
    default: 'button', // button | NuxtLink | a | etc
  },
})

const componentTag = computed(() => {
  if (props.as === 'NuxtLink') {
    return resolveComponent('NuxtLink')
  }
  return props.as || 'button'
})
const componentType = computed(() => (props.as === 'button' ? props.type : undefined))

const variantClass = computed(() => {
  if (props.variant === 'outline') return 'btn-outline btn-primary'
  if (props.variant === 'ghost') return 'btn-ghost'
  return 'btn-primary'
})
</script>
