<template>
    <div class="w-[900px] mx-auto mt-[100px]">
        <Wizard
            :total-steps="5"
            :current-step="currentStep"
            :step-labels="['Setup', 'Config', 'Review', 'Deploy', 'Done']"
            @step-change="handleLabeledStepChange"
        />
        <div class="mt-4 flex gap-2">
            <button @click="prevLabeledStep" :disabled="currentStep <= 1" class="btn btn-outline-primary">
                Previous
            </button>
            <button @click="nextLabeledStep" :disabled="currentStep >= 5" class="btn btn-outline-primary">Next</button>
        </div>
        <p class="mt-2 text-sm text-gray-600">
            Current Step: {{ currentStep }} -
            {{ ["Setup", "Config", "Review", "Deploy", "Done"][currentStep - 1] }}
        </p>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const currentStep = ref(1);

const handleLabeledStepChange = (step: number) => {
    currentStep.value = step;
};

const nextLabeledStep = () => {
    if (currentStep.value < 5) {
        currentStep.value++;
    }
};

const prevLabeledStep = () => {
    if (currentStep.value > 1) {
        currentStep.value--;
    }
};
</script>
