<script setup lang="ts">
const props = defineProps<{
  missingCategories: string[]
  onBack: () => void
  onConfirm: () => Promise<void> | void
  submitting: boolean
  submitLabel: string
  hideActions?: boolean
}>()
</script>

<template>
  <section class="home-missing-votes">
    <p class="home-vote-picker__eyebrow">Prüfen</p>
    <h4>Nicht alle Kategorien gewählt</h4>
    <p>
      In {{ props.missingCategories.length }} Kategorien fehlt noch eine Stimme. Du kannst trotzdem speichern
      oder zurückgehen und weitere Kategorien auswählen.
    </p>
    <div class="home-missing-votes__chips">
      <span v-for="category in props.missingCategories" :key="category">{{ category }}</span>
    </div>
    <div v-if="!props.hideActions" class="home-missing-votes__actions">
      <button type="button" class="home-wizard-footer__button home-wizard-footer__button--secondary" @click="props.onBack">
        Zurück zum Voting
      </button>
      <button
        type="button"
        class="home-wizard-footer__button home-wizard-footer__button--primary"
        :disabled="props.submitting"
        @click="props.onConfirm"
      >
        {{ props.submitting ? 'Speichert ...' : props.submitLabel }}
      </button>
    </div>
  </section>
</template>
