<script lang="ts">
	import BaseCaptcha from "../../base-captcha.svelte";
	import { HCaptchaProvider } from "@better-captcha/core/providers/hcaptcha";
	import type { HCaptchaHandle, RenderParameters } from "@better-captcha/core/providers/hcaptcha";
	import type { CaptchaState, ScriptOptions } from "@better-captcha/core";

	interface Props {
		sitekey: string;
		options?: Omit<RenderParameters, "sitekey">;
		scriptOptions?: ScriptOptions;
		class?: string;
		style?: string;
		autoRender?: boolean;
		onready?: (handle: HCaptchaHandle) => void;
		onerror?: (error: Error) => void;
		onSolve?: (token: string) => void;
	}

	let { sitekey, ...rest }: Props = $props();
	let captcha = $state();

	export const execute = () => captcha?.execute() ?? Promise.resolve();
	export const reset = () => captcha?.reset();
	export const destroy = () => captcha?.destroy();
	export const getResponse = () => captcha?.getResponse();
	export const getComponentState = (): CaptchaState =>
		captcha?.getComponentState() ?? { loading: false, error: null, ready: false };
	export const render = () => captcha?.render() ?? Promise.resolve();
</script>

<BaseCaptcha bind:this={captcha} providerClass={HCaptchaProvider} value={sitekey} {...rest} />
