<script setup lang="ts">
import 'bulma-o-steps/bulma-steps.min.css'
import { defineProps } from 'vue';
import {timeBookingsNewProcess}
  from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewProcess.vue";
import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
</script>

<template>
  <white-box>
    <ul class="steps has-content-centered">
      <!-- Dynamically generate steps based on the timeBookingsNewProcess -->
      <template v-for="step in timeBookingsNewProcess.steps" :key="step.id">
        <li class="steps-segment" :class="{ 'is-active': timeBookingsNewProcess.step.value === step.id }">
          <span class="steps-marker"></span>
          <div class="steps-content">
            <p class="is-size-4">{{ step.label }}</p>
            <p v-if="step.description">{{ step.description }}</p>
          </div>
        </li>
      </template>
    </ul>
    <hr />
    <slot name="before"></slot>
    <slot/>
    <slot name="after"></slot>
  </white-box>
</template>

<style scoped>

</style>