<script lang="ts">
	import { type MarkupContext } from "$lib/markup";
	import CommentCard from "./CommentCard.svelte";
	import type { CommentThread, ThreadInput } from "./comments";

	interface Props {
		threads: CommentThread[];
		subjectUri: string;
		subjectCid?: string;
		markup: MarkupContext;
		onsubmitted?: (submitted: ThreadInput) => void;
		onedited?: (edited: ThreadInput) => void;
		ondeleted?: (uri: string) => void;
	}

	let { threads, subjectUri, subjectCid, markup, onsubmitted, onedited, ondeleted }: Props =
		$props();
</script>

{#if threads.length}
	<div class="flex flex-col gap-4">
		{#each threads as thread (thread.self.uri)}
			<CommentCard
				{thread}
				{subjectUri}
				{subjectCid}
				{markup}
				{onsubmitted}
				{onedited}
				{ondeleted}
			/>
		{/each}
	</div>
{/if}
