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

const props = withDefaults(defineProps<Props>(), {
    size: 'md',
    variant: 'regular',
    color: 'regular',
    dropdown: false,
    join: 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',
        secondary: 'dui-btn-secondary',
        info: 'dui-btn-info',
        success: 'dui-btn-success',
        warning: 'dui-btn-warning',
        error: 'dui-btn-error'
    }
    const variantVariants = {
        regular: '',
        outline: 'dui-btn-outline'
    }
    const sizeClass = sizeVariants[props.size]
    const variantClass = variantVariants[props.variant]
    const colorClass = colorVariants[props.color]
    const joinClass = props.join ? 'dui-join-item' : ''
    return [sizeClass, variantClass, colorClass, joinClass]
})
</script>
<template>
    <label
        class="dui-btn h-auto px-3 py-2 duration-0"
        :class="styleClass"
        v-if="props.dropdown"
        tabindex="0"
    >
        <slot></slot>
    </label>
    <button
        type="button"
        class="dui-btn inline-block h-auto max-w-full truncate px-3 py-2 duration-0"
        :class="styleClass"
        v-else
    >
        <slot></slot>
    </button>
</template>
