<script setup>
let props = defineProps(['loadFunction', 'icon', 'isLoading'])
import { ref } from 'vue'

// If the isLoading prop is not set, default to false
const isLoading = ref(props.isLoading || false)

const loadWhileAwait = async (loadFunction) => {
  if (!props.isLoading !== undefined) {
    isLoading.value = true
  }
  await loadFunction()
  if (!props.isLoading !== undefined) {
    isLoading.value = false
  }
}

</script>

<template>
  <button class="button" :class="{ 'is-loading': props.isLoading }" @click="loadWhileAwait(loadFunction)">
    <span class="icon" v-if="icon">
      <i :class="icon"></i>
    </span>
    <span><slot></slot></span>
  </button>
</template>