<script lang="ts" generics="E extends { uri: string }">
	import type { Snippet } from "svelte";
	import type { Attachment } from "svelte/attachments";
	import TimeAgo from "#lib/components/ui/TimeAgo.svelte";
	import TimelineCard from "#lib/components/timeline/TimelineCard.svelte";
	import type { TimelineEvent } from "#lib/components/timeline/group.ts";

	let {
		title,
		items,
		row,
		trailing
	}: {
		title: Snippet;
		items: TimelineEvent<E>[];
		row: Snippet<[E]>;
		trailing?: Snippet;
	} = $props();

	const hideWhenWrapping: Attachment<HTMLElement> = (node) => {
		const header = node.parentElement!;
		const fit = () => {
			node.style.display = "none";
			const bare = header.offsetHeight;
			node.style.display = "";
			if (header.offsetHeight > bare) node.style.display = "none";
		};
		const observer = new ResizeObserver(fit);
		observer.observe(header);
		return () => observer.disconnect();
	};
</script>

<TimelineCard padded={false}>
	{#snippet header()}
		{@render title()}
		{#if trailing}
			<span class="contents" {@attach hideWhenWrapping}>{@render trailing()}</span>
		{/if}
		<TimeAgo value={items[0].eventAt} class="text-foreground-subtle" />
	{/snippet}

	<div class="divide-y divide-border-default">
		{#each items as item (item.event.uri)}
			<div class="p-sm">
				{@render row(item.event)}
			</div>
		{/each}
	</div>
</TimelineCard>