<script lang="ts">
	import { resolve } from "$app/paths";
	import Users from "$icon/users";
	import Separator from "#lib/components/ui/Separator.svelte";
	import { formatCount, pluralize } from "#lib/format.ts";

	interface Props {
		actor: string;
		followers: number;
		following: number;
		class?: string;
	}

	let { actor, followers, following, class: className }: Props = $props();
</script>

<div
	class="my-xs flex max-w-full items-center gap-xs truncate typography-paragraph-small {className}"
>
	<span class="shrink-0"><Users class="size-3.5" aria-hidden="true" /></span>
	<span>
		<a href={resolve(`/${actor}?tab=followers` as "/")} class="no-underline hover:underline"
			>{pluralize(followers, "follower", "followers")}</a
		>
	</span>
	<span class="text-foreground-subtle"><Separator variant="dot" /></span>
	<span>
		<a href={resolve(`/${actor}?tab=following` as "/")} class="no-underline hover:underline"
			>{formatCount(following)} following</a
		>
	</span>
</div>