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

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

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

<TimelineGroup {items}>
	{#snippet title()}
		<TimelineActorHeader {actor} verb="followed" count={items.length} plural="users">
			<User
				handle={subject.handle}
				did={subject.did}
				link
				class="gap-[calc(var(--spacing-word)+1px)]"
			/>
		</TimelineActorHeader>
	{/snippet}
	{#snippet row(event)}
		<FollowCard
			person={toPerson(event.subject)}
			followButton={signedIn}
			border={false}
			background={false}
		/>
	{/snippet}
</TimelineGroup>