<script setup lang="ts">
import { StepperItem as ShadcnStepperItem } from '@/components/core/stepper';
import type { UiStepperItemProps } from './types';

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

const props = defineProps<UiStepperItemProps>();
</script>

<template>
  <ShadcnStepperItem
    #default="slotProps"
    :step="props.step"
    :disabled="props.disabled"
    :completed="props.completed"
    :class="[
      'relative w-full flex-col justify-center',
      'data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-6',
    ]"
  >
    <slot v-bind="slotProps" />
  </ShadcnStepperItem>
</template>
