<script setup>
/**
 * Thin wrapper around PrimeVue Timeline. Views use this instead of importing Timeline directly.
 * @see https://primevue.org/timeline/
 */
import Timeline from "primevue/timeline";

defineProps({
  value: { type: Array, default: () => [] },
  /** Unique field per event (defaults to `id` when present on items). */
  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>
