<script lang="ts">
	import User from "#lib/components/ui/User.svelte";
	import FollowCard from "#lib/components/profile/FollowCard.svelte";
	import TimelineCard from "#lib/components/timeline/TimelineCard.svelte";
	import TimelineTargetHeader from "#lib/components/timeline/TimelineTargetHeader.svelte";
	import { toPerson } from "#lib/components/timeline/mappers.ts";
	import type { TimelineEvent } from "#lib/components/timeline/group.ts";
	import type { FollowEvent } from "#lib/api/lexicons/types/org/tangled/feed/getTimeline.ts";

	let { items, signedIn = false }: { items: TimelineEvent<FollowEvent>[]; signedIn?: boolean } =
		$props();

	const subject = $derived(items[0].event.subject);
</script>

<TimelineCard>
	{#snippet header()}
		<TimelineTargetHeader
			actors={items.map((item) => item.event.actor)}
			verb="followed"
			eventAt={items[0].eventAt}
		>
			<User
				handle={subject.handle}
				did={subject.did}
				link
				class="gap-[calc(var(--spacing-word)+1px)]"
			/>
		</TimelineTargetHeader>
	{/snippet}

	<FollowCard
		person={toPerson(subject)}
		followButton={signedIn}
		border={false}
		background={false}
	/>
</TimelineCard>