<script setup>
import Timeline from "primevue/timeline";

defineProps({
  value: { type: Array, default: () => [] },
  dataKey: { type: String, default: "id" },
  align: { type: String, default: "left" },
  layout: { type: String, default: "vertical" },
});
</script>

<template>
  <Timeline
    :value="value"
    :data-key="dataKey"
    :align="align"
    :layout="layout"
    class="base-timeline w-full"
  >
    <template v-if="$slots.opposite" #opposite="slotProps">
      <slot name="opposite" v-bind="slotProps" />
    </template>
    <template v-if="$slots.marker" #marker="slotProps">
      <slot name="marker" v-bind="slotProps" />
    </template>
    <template v-if="$slots.connector" #connector="slotProps">
      <slot name="connector" v-bind="slotProps" />
    </template>
    <template v-if="$slots.content" #content="slotProps">
      <slot name="content" v-bind="slotProps" />
    </template>
  </Timeline>
</template>
