<script lang="ts">
	import VouchCard from "../VouchCard.svelte";
	import Section from "$lib/components/ui/Section.svelte";
	import type { VouchData } from "../types";

	let {
		vouches,
		isSelf,
		profileHandle
	}: { vouches: VouchData[]; isSelf: boolean; profileHandle: string } = $props();

	const profileLabel = $derived(isSelf ? "you" : profileHandle);
</script>

<Section
	title="Vouches"
	empty={vouches.length === 0}
	emptyMessage="No vouches yet."
	listClass="relative ml-5 flex flex-col gap-6 border border-transparent px-4"
>
	<div class="absolute top-8 bottom-8 z-0 w-0.5 bg-border-default"></div>
	{#each vouches as vouch (vouch.uri)}
		<VouchCard {vouch} {profileLabel} />
	{/each}
</Section>
