<template>
    <div class="flex flex-col items-center space-y-4 md:space-y-0 md:flex-row mt-10 justify-start md:justify-evenly">
        <div v-if="backable"
            class="bg-primary hover:bg-secondary px-4 py-2 shadow text-teal-200 leading-none cursor-pointer rounded-lg"
            @click.prevent="back">Zurück</div>
        <div v-if="nextable"
            class="bg-primary hover:bg-emerald-600 px-4 py-2 shadow text-teal-200 leading-none cursor-pointer rounded-lg"
            @click.prevent="next">Weiter</div>
        <button v-else type="submit"
            class="relative flex items-center bg-primary hover:bg-emerald-600 px-8 py-2 shadow text-teal-200 leading-none cursor-pointer rounded-lg">
            <div x-show="loading" class="absolute left-1">
                <div class="spinner">
                    <div class="bounce1"></div>
                    <div class="bounce2"></div>
                    <div></div>
                </div>
            </div>
            Anmeldung absenden
        </button>
    </div>
</template>

<script setup>
import useNav from '../composables/useNav.js';
import { computed } from 'vue';
const emits = defineEmits(['update:modelValue']);

const props = defineProps({
    modelValue: {
        required: true,
        type: Number,
    },
    last: {
        type: Number,
        required: true,
    },
});

const innerValue = computed({
    get() {
        return props.modelValue;
    },
    set(newValue) {
        emits('update:modelValue', newValue);
    },
});

const { back, next, backable, nextable } = useNav(innerValue, props.last);
</script>
