<template>
  <div class="button" :class="{ spinning: isSpinning }" @click="() => isSpinning ? null : $emit('click')">
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSpinning: false,
    };
  },

  props: {
    label: {
      type: String,
      default: "Button",
    },

    spinTillResolved: {
      type: Promise,
      default: null,
    },
  },

  watch: {
    async spinTillResolved(spin) {
      if (spin == null) {
        this.isSpinning = false;
        return;
      }
      console.log(spin);
      this.isSpinning = true;
      try {
        await spin;
      } finally {
        this.isSpinning = false;
      }
    },
  },
};
</script>

<style scoped>
.button {
  display: flex;
  align-items: center;
  text-align: center;
  padding: 4px 8px;
  font-size: 1em;
}

.button:hover {
  background: var(--accent);
}

.spinning {
  opacity: 0.4;
}

.spinning:hover{
  cursor: wait;
}
</style>