<script lang="ts">
	import { resolve } from "$app/paths";
	import Users from "$icon/users";

	interface Props {
		handle: string;
		followers: number;
		following: number;
	}

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

<div class="my-2 flex max-w-full items-center gap-2 truncate typography-paragraph-small">
	<span class="shrink-0"><Users class="size-4" aria-hidden="true" /></span>
	<span>
		<a href={resolve(`/${handle}?tab=followers` as "/")} class="no-underline hover:underline"
			>{followers} followers</a
		>
	</span>
	<span class="select-none after:content-['·']"></span>
	<span>
		<a href={resolve(`/${handle}?tab=following` as "/")} class="no-underline hover:underline"
			>{following} following</a
		>
	</span>
</div>
