<script lang="ts">
	import type { Snippet } from "svelte";
	import Avatar from "$lib/components/ui/Avatar.svelte";
	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
	import Reactions from "$lib/components/reaction/Reactions.svelte";
	import type { ReactionGroup } from "$lib/components/reaction/reactions";

	interface Props {
		authorHandle: string;
		authorDid: string;
		createdAt: string;
		body: string;
		bodyHtml: string | null;
		variant?: "top" | "reply";
		deleted?: boolean;
		reactions?: ReactionGroup[];
		subjectUri: string;
		onreactionschange?: (next: ReactionGroup[]) => void;
		editor?: Snippet;
	}

	let {
		authorHandle,
		authorDid,
		createdAt,
		body,
		bodyHtml,
		variant = "top",
		deleted = false,
		reactions = [],
		subjectUri,
		onreactionschange,
		editor
	}: Props = $props();
</script>

{#if deleted}
	<div
		class={`typography-paragraph-small text-foreground-subtle italic ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}
	>
		This comment was deleted.
	</div>
{:else}
	<div
		class={`flex gap-2 ${variant === "top" ? "border-b border-border-default bg-background-default px-6 py-4" : "py-4 pr-4"}`}
	>
		<div class="shrink-0">
			<Avatar did={authorDid} handle={authorHandle} size="size-8" tiny />
		</div>
		<div class="min-w-0 flex-1">
			<div class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-subtle">
				<span class="text-foreground-default">{authorHandle}</span>
				<span class="before:mr-1 before:content-['·']">
					<TimeAgo value={createdAt} />
				</span>
			</div>
			{#if editor}
				<div class="mt-1">{@render editor()}</div>
			{:else if bodyHtml}
				<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
				<article class="markup mt-1">{@html bodyHtml}</article>
			{:else if body}
				<article class="mt-1 whitespace-pre-wrap text-foreground-default">{body}</article>
			{/if}
			{#if !editor}
				<Reactions {reactions} {subjectUri} onchange={onreactionschange} class="mt-2" />
			{/if}
		</div>
	</div>
{/if}
