<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import type { TimelineItemData } from "."
import TimelineItem from "./TimelineItem.vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  /** Array of timeline items. When provided, renders TimelineItem for each. */
  items?: TimelineItemData[]
  class?: HTMLAttributes["class"]
}>()
</script>

<template>
  <div
    data-slot="timeline"
    role="list"
    :class="
      cn(
        'relative flex flex-col [&>[data-slot=timeline-item]:last-child_.timeline-item-connector]:hidden',
        props.class,
      )
    "
  >
    <template v-if="props.items?.length">
      <TimelineItem
        v-for="(item, index) in props.items"
        :key="index"
        :title="item.title"
        :date="item.date"
        :time="item.time"
        :state="item.state ?? 'pending'"
      />
    </template>
    <slot v-else />
  </div>
</template>
