<script lang="ts">
	import EmptyState from "$lib/components/ui/EmptyState.svelte";
	import TimelineRepoEvent from "./TimelineRepoEvent.svelte";
	import TimelineStarEvent from "./TimelineStarEvent.svelte";
	import TimelineFollowEvent from "./TimelineFollowEvent.svelte";
	import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";

	let {
		feed,
		emptyMessage = "Nothing here yet."
	}: { feed: ShTangledFeedGetTimeline.$output["feed"]; emptyMessage?: string } = $props();
</script>

{#if feed.length > 0}
	<div class="flex flex-col gap-4">
		{#each feed as item, i (item.event.uri)}
			{@const event = item.event}
			<div class="relative">
				<!-- connector bridging the gap up to the previous card -->
				{#if i !== 0}
					<div class="absolute -top-4 left-8 h-4 w-0.5 bg-border-default" aria-hidden="true"></div>
				{/if}
				{#if event.$type === "sh.tangled.feed.getTimeline#repoEvent"}
					<TimelineRepoEvent {event} eventAt={item.eventAt} />
				{:else if event.$type === "sh.tangled.feed.getTimeline#starEvent"}
					<TimelineStarEvent {event} eventAt={item.eventAt} />
				{:else if event.$type === "sh.tangled.feed.getTimeline#followEvent"}
					<TimelineFollowEvent {event} eventAt={item.eventAt} />
				{/if}
			</div>
		{/each}
	</div>
{:else}
	<EmptyState message={emptyMessage} />
{/if}
