<template>
    <div class="flex flex-col items-center mt-[164px] gap-32">
        <div class="flex gap-8 items-center justify-center">
<!--@TODO Prendre en compte que l'on peut aussi décharger de la marchandise-->
            <h1 class="text-4xl uppercase font-bold">Décharger les bêtes</h1>
            <UiLoadingDots />
        </div>
        <button
            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
            @click="goNext"
        >Peser</button>
    </div>
</template>

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

const receptionStore = useReceptionStore()

async function goNext() {
    if (!receptionStore.current) {
        return
    }

    const nextStep = receptionStore.current.currentStep + 1
    await receptionStore.updateReception(receptionStore.current.id, {
        currentStep: nextStep
    })
}
</script>
