<script setup lang="ts">
export interface HomeWizardFooterAction {
  label: string
  disabled?: boolean
  tone?: 'primary' | 'secondary' | 'danger'
  onClick: () => Promise<void> | void
}

const props = defineProps<{
  progressText: string
  helperText: string
  actions: HomeWizardFooterAction[]
}>()
</script>

<template>
  <footer class="home-wizard-footer">
    <div class="home-wizard-footer__copy">
      <strong>{{ props.progressText }}</strong>
      <span>{{ props.helperText }}</span>
    </div>
    <div class="home-wizard-footer__actions">
      <button
        v-for="action in props.actions"
        :key="action.label"
        type="button"
        class="home-wizard-footer__button"
        :class="`home-wizard-footer__button--${action.tone ?? 'primary'}`"
        :disabled="action.disabled"
        @click="action.onClick"
      >
        {{ action.label }}
      </button>
    </div>
  </footer>
</template>
