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

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

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

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

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

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

defineExpose({ resetButton });
</script>
