<template>
  <ol :class="stylingClasses" ref="stepperRef">
    <slot></slot>
  </ol>
</template>

<script lang="ts" setup>
import { computed, ref, provide } from 'vue'

interface IStepperProps {
  className?: string
  hideNonActiveStepsContent?: boolean
  hideNonActiveSteps?: boolean
  orientation?: 'horizontal' | 'vertical'
}

const props = withDefaults(defineProps<IStepperProps>(), {
  hideNonActiveStepsContent: true,
  hideNonActiveSteps: false,
  orientation: 'vertical',
})

const stepperRef = ref<HTMLOListElement | null>(null)

const stylingClasses = computed(() => {
  return [
    props.className,
    'pkt-stepper',
    props.orientation === 'horizontal' ? 'pkt-stepper--horizontal' : 'pkt-stepper--vertical',
  ]
    .filter(Boolean)
    .join(' ')
})

// Make props available to all children
provide('hideNonActiveStepsContent', props.hideNonActiveStepsContent)
provide('hideNonActiveSteps', props.hideNonActiveSteps)
</script>

<style lang="scss"></style>
