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

// props
const props = withDefaults(defineProps<Props>(), {
    variant: "solid",
    size: "lg",
    disabled: false,
});
const { variant, size, loading, disabled } = 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-primary": variant.value === "primary",
        },
        {
            "btn-xl": size.value === "xl",
            "btn-lg": size.value === "lg",
            "btn-md": size.value === "md",
        },
        {
            "pointer-events-none cursor-not-allowed": loading.value || disabled.value,
        },
    ];
});
</script>

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