<script setup lang="ts">
interface Props {
  size?: string
  variant?: 'regular' | 'outline'
  color?: string
  dropdown?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'md',
  variant: 'regular',
  color: 'regular',
  dropdown: false
})

const styleClass = computed(() => {
  const sizeClass = `btn-${props.size}`
  const variantClass = props.variant !== 'regular' ? `btn-${props.variant}` : ''
  const colorClass = props.color !== 'regular' ? `btn-${props.color}` : ''
  return [sizeClass, variantClass, colorClass]
})
</script>
<template>
  <label class="btn duration-0" :class="styleClass" v-if="props.dropdown" tabindex="0">
    <slot></slot>
  </label>
  <button class="btn duration-0" :class="styleClass" v-else><slot></slot></button>
</template>
