<template>
  <component
    :is="componentTag"
    :type="componentType"
    :class="[baseClass, 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 baseClass = 'inline-flex items-center justify-center gap-2 rounded-full border-0 px-5 py-3 text-sm font-bold transition duration-200'

const variantClass = computed(() => {
  if (props.variant === 'outline') return 'bg-transparent text-[#2f2418] ring-1 ring-[#cbbca6] hover:bg-[#f6f1ea]'
  if (props.variant === 'ghost') return 'bg-[#f6f1ea] text-[#5f4b33] hover:bg-[#ece2d3]'
  return 'bg-[#2f2418] text-white shadow-[0_12px_28px_rgba(47,36,24,0.16)] hover:bg-[#493824]'
})
</script>
