<script setup>
import { nextStep, nextStepDelay, previousStep } from "@/components/shop/POSDepartmentProcess.vue";
import { defineProps } from 'vue';
const props = defineProps(['label', 'isText']);

const label = props.label || 'Gå tilbage';
import { Colors } from "@/ThemeConfig.vue";

// Go to previous step
const goToPreviousStep = () => {
  // Get the department id
  previousStep();
}

const emptyIfText = (string) => props.isText ? '' : string;
</script>

<template>
  <button
      class="button"
      :class="{ 'is-text': props.isText }"
      @click="goToPreviousStep" v-if="nextStepDelay === 0"
      :style="{
        'background-color': emptyIfText(Colors.buttons.success.backgroundColor),
        'color': emptyIfText(Colors.buttons.success.textColor)
      }"
  >
    {{ label }}</button>
  <button class="button is-loading" v-else>Please wait... {{ nextStepDelay }}</button>
</template>

<style scoped>

</style>