<template>
  <a
    v-if="href"
    :href="href"
    :target="target"
    :rel="target === '_blank' ? 'noopener noreferrer' : undefined"
    :class="variantClasses"
  >
    <slot />
  </a>
  <NuxtLink
    v-else-if="to"
    :to="to"
    :class="variantClasses"
  >
    <slot />
  </NuxtLink>
  <button
    v-else
    :class="variantClasses"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
const props = defineProps<{
  variant?: 'primary' | 'accent' | 'ghost'
  to?: string
  href?: string
  target?: string
}>()

const variantClasses = computed(() => {
  switch (props.variant) {
    case 'accent': return 'btn-accent'
    case 'ghost': return 'btn-ghost'
    default: return 'btn-primary'
  }
})
</script>
