<template>
    <button class="btn btn-label-primary btn-icon" @click="toggleText">
        <i :class="buttonClass"></i>
    </button>
</template>
<script setup>
    import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
    const props = defineProps({
        isToggleEnabled: {
            type: Boolean,
            default: false,
        },
        isActive: {
            type: Boolean,
            required: false,
        },
    });
    const emit = defineEmits(["click"]);
    const buttonClass = ref('bx bx-edit-alt');
    watchEffect(() => {
        buttonClass.value = props.isActive ? 'bx bx-x' : 'bx bx-edit-alt';
    });
    const toggleText = (event) => {
        // 이벤트 객체를 매개변수로 받아옵니다
        if (props.isToggleEnabled) {
            buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
        }
        emit("click", event); // 이벤트 객체를 같이 전달
    };
    const resetButton = () => {
        buttonClass.value = 'bx bx-edit-alt';
    };
    defineExpose({ resetButton });
</script>
