<script setup lang="ts">
// types
type Props = {
    variant?: "solid" | "secondary" | "outlined" | "ghost";
    size?: "xl" | "lg" | "md";
    startIcon?: string;
    endIcon?: string;
    loading?: boolean;
};

// props
const props = withDefaults(defineProps<Props>(), {
    variant: "solid",
    size: "lg",
});
const { variant, size, loading } = toRefs(props);

// computed
const classes = computed(() => {
    return [
        "flex items-center justify-center transition-all cursor-pointer max-lg:text-xs",
        {
            "btn-solid": variant.value === "solid",
            "btn-secondary": variant.value === "secondary",
            "btn-outlined": variant.value === "outlined",
            "btn-ghost": variant.value === "ghost",
        },
        {
            "btn-xl": size.value === "xl",
            "btn-lg": size.value === "lg",
            "btn-md": size.value === "md",
        },
        {
            "pointer-events-none opacity-80 cursor-not-allowed": loading.value,
        },
    ];
});
</script>

<template>
    <button :class="classes" :disabled="loading">
        <Icon v-if="!loading && startIcon" :name="startIcon" />
        <slot v-if="!loading" />
        <Icon v-if="!loading && endIcon" :name="endIcon" />
        <Icon v-if="loading" name="svg-spinners:3-dots-fade" class="my-0.5" />
    </button>
</template>
