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

	let { vouches }: { vouches: VouchData[] } = $props();
</script>

<section>
	<h2 class="px-2 pb-4 text-base font-medium">Vouches</h2>
	{#if vouches.length === 0}
		<EmptyState message="No vouches yet." />
	{:else}
		<div class="flex flex-col gap-4">
			{#each vouches as vouch (vouch.uri)}
				<VouchCard {vouch} />
			{/each}
		</div>
	{/if}
</section>
