<template>
    <component
        :is="'button'"
        :type="type"
        :disabled="isDisabled"
        class="inline-flex items-center justify-center rounded-md"
        :class="[
            isDisabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
            buttonClass
        ]"
        v-bind="attrs"
    >
        <slot v-if="!loading" />
        <UiLoadingDots v-else />
    </component>
</template>

<script setup lang="ts">
import {computed, useAttrs} from 'vue'

defineOptions({inheritAttrs: false})

const props = withDefaults(
    defineProps<{
        type?: 'button' | 'submit' | 'reset'
        disabled?: boolean
        loading?: boolean
        buttonClass?: string
    }>(),
    {
        disabled: false,
        loading: false,
        buttonClass: ''
    }
)

const attrs = useAttrs()
const isDisabled = computed(() => props.disabled || props.loading)
</script>
