<script setup lang="ts">

// types
type Props = {
    variant?: "solid" | "secondary" | "outlined" | "ghost"
    size?: "xl" | "lg" | "md",
    startIcon?: string;
    endIcon?: string;
}

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

// computed
const classes = computed(() => {
    return [
        "rounded-full flex items-center justify-center transition-all cursor-pointer",
        {
            "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"
        }
    ];
});

</script>

<template>
    <button :class="classes">
        <Icon v-if="startIcon" :name="startIcon" class="ms-0" />
        <slot />
        <Icon v-if="endIcon" :name="endIcon" class="me-0" />
    </button>
</template>

