<script setup lang="ts">
interface Props {
  size?: 'xs' | 'sm' | 'md' | 'lg'
  variant?: 'regular' | 'outline'
  color?: 'regular' | 'primary'
  dropdown?: boolean
}

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

const styleClass = computed(() => {
  const sizeVariants = {
    xs: 'dui-btn-xs',
    sm: 'dui-btn-sm',
    md: 'dui-btn-md',
    lg: 'dui-btn-lg'
  }
  const colorVariants = {
    regular: '',
    primary: 'dui-btn-primary'
  }
  const variantVariants = {
    regular: '',
    outline: 'dui-btn-outline'
  }
  const sizeClass = sizeVariants[props.size]
  const variantClass = variantVariants[props.variant]
  const colorClass = colorVariants[props.color]
  return [sizeClass, variantClass, colorClass]
})
</script>
<template>
  <label class="dui-btn duration-0" :class="styleClass" v-if="props.dropdown" tabindex="0">
    <slot></slot>
  </label>
  <button class="dui-btn duration-0" :class="styleClass" v-else><slot></slot></button>
</template>
