<script lang="ts">
	import User from "$lib/components/ui/User.svelte";
	import FollowCard from "$lib/components/profile/FollowCard.svelte";
	import TimelineCard from "./TimelineCard.svelte";
	import { relativeTime } from "$lib/format";
	import { toPerson } from "./mappers";
	import type { FollowEvent } from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";

	let { event, eventAt }: { event: FollowEvent; eventAt: string } = $props();
</script>

<TimelineCard>
	{#snippet header()}
		<User handle={event.actor.handle} did={event.actor.did} />
		<span>followed</span>
		<User handle={event.subject.handle} did={event.subject.did} />
		<span class="text-foreground-subtle">{relativeTime(eventAt)}</span>
	{/snippet}

	<FollowCard person={toPerson(event.subject)} border={false} shadow={false} background={false} />
</TimelineCard>
