<script setup lang="ts">
const { data: challengeData } = await useFetch('/api/pow/challenge');

if (!challengeData) {
    throw createError({
        statusCode: 500,
        message: 'Failed to fetch challenge',
    });
}

function solved(ev: CustomEvent) {
    console.log("Impost Solved:", ev.detail.solution);
}

function formsubmit(ev: Event) {
    console.log("Submitted form");
}
</script>

<template>
    <div class="flex justify-center items-center h-screen w-screen ">
        <form @submit="formsubmit" action="/"
            class="p-5 rounded-2xl bg-dark-9 border-coolGray-600 border flex flex-col gap-2">
            <impost-captcha name="impost" challengeUrl="/api/pow" auto="onsubmit"
                :challengejson="JSON.stringify(challengeData!.challenge)" @impost:solved="solved" />
            <input class="bg-blue-7 text-white font-semibold px-4 py-2.5 border-0 rounded-md" type="submit"
                value="Submit" />
        </form>
    </div>
</template>