<script lang="ts">
	import FollowCard from '../FollowCard.svelte';
	import EmptyState from '../EmptyState.svelte';
	import type { PersonData } from '../types';

	interface Props {
		people: PersonData[];
		title: string;
		emptyMessage: string;
	}

	let { people, title, emptyMessage }: Props = $props();
</script>

<section>
	<h2 class="px-2 pb-4 text-base font-medium">{title}</h2>
	{#if people.length === 0}
		<EmptyState message={emptyMessage} />
	{:else}
		<div class="flex flex-col gap-8">
			{#each people as person (person.did)}
				<FollowCard {person} />
			{/each}
		</div>
	{/if}
</section>
