<template>
    <button class="btn btn-label-primary btn-icon float-end" @click="toggleText">
        <i :class="buttonClass"></i>
    </button>
</template>

<script setup>
import { ref, defineProps, defineExpose } from 'vue';

const props = defineProps({
    isToggleEnabled: {
        type: Boolean,
        default: false,
    },
});

const buttonClass = ref("bx bx-edit");

const toggleText = () => {
    if (props.isToggleEnabled) {
        buttonClass.value = buttonClass.value === "bx bx-edit" ? "bx bx-x" : "bx bx-edit";
    }
};

const resetButton = () => {
    buttonClass.value = "bx bx-edit";
};

defineExpose({ resetButton });
</script>
