<template>
    <h1>Formulaire</h1>
    <button
        @click="validate"
        class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
    >Valider
    </button>
</template>

<script setup lang="ts">
import { useReceptionStore } from '~/stores/reception'

const receptionStore = useReceptionStore()
const isLoading = ref<boolean>(false)
const errorMessage = ref<string | null>(null)

async function validate() {
    if (!receptionStore.current) {
        errorMessage.value = 'Réception introuvable.'
        return
    }

    isLoading.value = true
    try {
        const nextStep = receptionStore.current.currentStep + 1
        await receptionStore.updateReception(receptionStore.current.id, {
            currentStep: nextStep
        })
    } catch (error) {
        errorMessage.value = error.error ?? 'Erreur inconnue.'
    } finally {
        isLoading.value = false
    }
}

</script>
