<template>
    <div class="flex w-4/5 mx-auto justify-between">
        <div>
            <v-btn v-show="prev" href="#" :disabled="!prevable" @click.prevent="$emit('update:modelValue', modelValue - 1)">Zurück</v-btn>
        </div>
        <div>
            <v-btn v-show="next && !submit" href="#" :disabled="!nextable" @click.prevent="$emit('update:modelValue', modelValue + 1)">Weiter</v-btn>
            <v-btn v-show="next && submit" href="#" class="mt-4" type="submit" :disabled="!nextable">Absenden</v-btn>
        </div>
    </div>
</template>

<script setup>
defineEmits(['update:modelValue']);

const props = defineProps({
    submit: {
        type: Boolean,
        default: () => false,
    },
    next: {
        type: Boolean,
        default: () => true,
    },
    prev: {
        type: Boolean,
        default: () => true,
    },
    modelValue: {
        default: () => null,
    },
    prevable: {
        type: Boolean,
        default: () => true,
    },
    nextable: {
        type: Boolean,
        default: () => true,
    },
});
</script>
