<script lang="ts">
	import { createAction } from "#lib/action.svelte.ts";
	import { getAuth } from "#lib/auth.svelte.ts";
	import { createBobbinClient } from "#lib/api/client.ts";
	import { loadCommentPage, type CommentPage } from "#lib/components/comment/comments.ts";
	import Button from "#lib/components/ui/Button.svelte";
	import ErrorBox from "#lib/components/ui/Error.svelte";

	interface Props {
		subjectUri: string;
		cursor: string | null;
		bobbinUrl?: string;
		onpage: (page: CommentPage) => void;
	}

	let { subjectUri, cursor, bobbinUrl, onpage }: Props = $props();

	const auth = getAuth();

	const load = createAction(async () => {
		if (!cursor || !bobbinUrl) return;
		onpage(
			await loadCommentPage(
				createBobbinClient({ serviceUrl: bobbinUrl }),
				subjectUri,
				auth.currentDid ?? undefined,
				cursor
			)
		);
	});
</script>

{#if cursor && bobbinUrl}
	<Button
		data-testid="loadOlderComments"
		onclick={() => load.run()}
		loading={load.loading}
		disabled={load.loading}
		class="w-full"
	>
		Load older comments
	</Button>
{/if}
{#if load.error}
	<ErrorBox label={load.error} />
{/if}