<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 overflow-hidden text-sm text-ellipsis whitespace-nowrap"
>
	<span class="flex-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>
