<script lang="ts" setup>
defineOptions({ name: 'BglTimeline' })
import { useSlots } from 'vue'
import type { TimelineEntry } from './Timeline.types'
import TimelineItem from './TimelineItem.vue'

/**
 * Vertical activity / history feed. Two ways to use it:
 *
 * 1. Data-driven — pass `items`; each maps to a <TimelineItem>. Use the default
 *    scoped slot to render custom body content per entry:
 *      <Timeline :items="activity">
 *        <template #default="{ item }">{{ item.title }}</template>
 *      </Timeline>
 *
 * 2. Composition — drop <TimelineItem> children directly (omit `items`). Mark the
 *    last one with `last` to drop its connector, or let data-driven mode do it.
 */
const { items = [] } = defineProps<{
	items?: TimelineEntry[]
}>()

const slots = useSlots()
</script>

<template>
	<div class="bgl-timeline grid">
		<template v-if="items.length">
			<TimelineItem
				v-for="(item, i) in items"
				:key="i"
				:title="item.title"
				:meta="item.meta"
				:icon="item.icon"
				:color="item.color"
				:last="i === items.length - 1"
			>
				<template v-if="slots.default" #default>
					<slot :item="item" :index="i" />
				</template>
				<template v-if="slots.meta" #meta>
					<slot name="meta" :item="item" :index="i" />
				</template>
			</TimelineItem>
		</template>
		<slot v-else name="items" />
	</div>
</template>

<style scoped>
.bgl-timeline {
	align-content: start;
}
</style>
