import { useLoaderData } from "@remix-run/react";

export async function loader({
  context,
}: {
  context: RequestContext;
}): Promise<string> {
  return context.env.TURNSTILE_SITEKEY;
}

export default function () {
  return (
    <>
      <div
        className="cf-turnstile"
        data-callback="returnToken"
        data-error-callback="handleError"
        data-sitekey={useLoaderData<typeof loader>()}
      ></div>
      <script>
        {`
          function returnToken(token) {
            window.flutter_inappwebview.callHandler("onToken", token);
          }
  
          function handleError(_error) {
            window.flutter_inappwebview.callHandler("onToken", null);
          }
        `}
      </script>
      <script
        async
        defer
        src="https://challenges.cloudflare.com/turnstile/v0/api.js"
      ></script>
    </>
  );
}