<script lang="ts" setup>
defineOptions({ name: 'BglTimelineItem' })
import type { IconType, ThemeType } from '@bagelink/vue'
import { Icon } from '@bagelink/vue'
import { useSlots } from 'vue'

/**
 * One node in a <Timeline>: a marker (icon dot or plain dot) with a connecting
 * line, a title, optional meta line, and free content via the default slot.
 * - `icon` renders inside the dot; otherwise a small solid dot is shown.
 * - `color` themes the dot (and icon).
 * - `last` removes the connector line (auto-handled by <Timeline>).
 * - Slots: `#marker` (replace the dot), `#meta`, default (body).
 */
const {
	title = '',
	meta = '',
	icon,
	color = 'primary',
	last = false,
} = defineProps<{
	title?: string
	meta?: string
	icon?: IconType
	color?: ThemeType
	last?: boolean
}>()

const slots = useSlots()
</script>

<template>
	<div class="bgl-tl-item flex gap-075" :class="{ 'bgl-tl-item--last': last }">
		<div class="bgl-tl-rail flex-column align-items-center flex-shrink-0">
			<span class="bgl-tl-marker flex-center" :style="{ '--tl-color': `var(--bgl-${color})` }">
				<slot name="marker">
					<Icon v-if="icon" :icon="icon" :size="0.85" />
					<span v-else class="bgl-tl-dot" />
				</slot>
			</span>
			<span v-if="!last" class="bgl-tl-line" />
		</div>
		<div class="bgl-tl-body min-w-0">
			<p v-if="title || slots.title" class="bgl-tl-title m-0"><slot name="title">{{ title }}</slot></p>
			<div v-if="slots.default" class="bgl-tl-content"><slot /></div>
			<p v-if="meta || slots.meta" class="bgl-tl-meta m-0"><slot name="meta">{{ meta }}</slot></p>
		</div>
	</div>
</template>

<style scoped>
.bgl-tl-item {
	min-height: 1.75rem;
}
.bgl-tl-marker {
	width: 1.625rem;
	height: 1.625rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--tl-color) 15%, transparent);
	color: var(--tl-color);
}
.bgl-tl-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--tl-color);
}
.bgl-tl-line {
	width: 2px;
	flex: 1;
	background: var(--bgl-border-color);
	margin: 2px 0;
}
.bgl-tl-body {
	padding-bottom: 1rem;
}
.bgl-tl-item--last .bgl-tl-body {
	padding-bottom: 0;
}
.bgl-tl-title {
	font-size: 0.875rem;
	line-height: 1.3;
}
.bgl-tl-meta {
	font-size: 0.6875rem;
	color: var(--bgl-text-soft, var(--bgl-gray));
	margin-top: 0.125rem;
}
.bgl-tl-content {
	font-size: 0.8125rem;
	color: var(--bgl-text-soft, var(--bgl-gray));
}
</style>
