<script lang="ts">
	import type { Snippet } from "svelte";
	import AvatarList from "#lib/components/profile/AvatarList.svelte";
	import TimeAgo from "#lib/components/ui/TimeAgo.svelte";
	import type * as OrgTangledActorDefs from "#lib/api/lexicons/types/org/tangled/actor/defs.ts";
	import { plural } from "#lib/format.ts";

	const STACK_COUNT = 5;

	let {
		actors,
		verb,
		eventAt,
		children
	}: {
		actors: OrgTangledActorDefs.ProfileViewBasic[];
		verb: string;
		eventAt: string;
		children: Snippet;
	} = $props();

	const people = $derived([...new Map(actors.map((actor) => [actor.did, actor])).values()]);
</script>

<AvatarList people={people.slice(0, STACK_COUNT)} />
<span>{people.length} {plural(people.length, "user", "users")}</span>
<span>{verb}</span>
{@render children()}
<TimeAgo value={eventAt} class="text-foreground-subtle" />