Controlled stepper

<script setup lang="ts">
import { ref } from "vue"
import { Stepper, StepperContent, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperSeparator, StepperTrigger } from "@/components/reui/stepper"
import { Button } from "@/components/ui/button"

const steps = [1, 2, 3, 4]

const currentStep = ref(2)
</script>

<template>
  <Stepper
    v-model:value="currentStep"
    class="w-full max-w-md space-y-8"
  >
    <StepperNav>
      <StepperItem v-for="step in steps" :key="step" :step="step">
        <StepperTrigger as-child>
          <StepperIndicator
            class="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:bg-green-500 data-[state=completed]:text-white data-[state=inactive]:text-gray-500"
          >{{ step }}</StepperIndicator>
        </StepperTrigger>
        <StepperSeparator
          v-if="steps.length > step"
          class="group-data-[state=completed]/step:bg-green-500"
        />
      </StepperItem>
    </StepperNav>

    <StepperPanel class="text-sm">
      <StepperContent
        v-for="step in steps"
        :key="step"
        class="flex w-full items-center justify-center"
        :value="step"
      >Step {{ step }} content</StepperContent>
    </StepperPanel>

    <!-- Buttons -->
    <div class="flex items-center justify-between gap-2.5">
      <Button
        variant="outline"
        :disabled="currentStep === 1"
        @click="currentStep = currentStep - 1"
      >Previous</Button>
      <Button
        variant="outline"
        :disabled="currentStep === steps.length"
        @click="currentStep = currentStep + 1"
      >Next</Button>
    </div>
  </Stepper>
</template>