<script setup lang="ts">
import { Stepper as ShadcnStepper } from '@/components/core/stepper';
import type { UiStepperProps } from './types';

defineOptions({
  name: 'UiStepper',
});

defineProps<UiStepperProps>();
const model = defineModel<number>();
</script>

<template>
  <ShadcnStepper
    #default="slotProps"
    v-model="model"
    :default-value="$props.defaultValue"
    :orientation="$props.orientation"
    :linear="$props.linear"
    :class="[
      'w-full items-start',
      'data-[orientation=vertical]:flex-col data-[orientation=vertical]:gap-10',
    ]"
  >
    <slot v-bind="slotProps" />
  </ShadcnStepper>
</template>
