"use client";

// The "Sign in with qID" button as a client component. The widget itself is
// framework-free vanilla JS served from public/, so it never enters your
// bundle and works the same in every app.

import { useEffect, useRef } from "react";

export default function SignInWithQid({ appName = "Your app", onSignedIn }) {
  const mount = useRef(null);

  useEffect(() => {
    let widget;
    let cancelled = false;
    (async () => {
      const { mountQidConnect } = await import(
        /* webpackIgnore: true */ "/qid-connect-widget.js"
      );
      if (cancelled || !mount.current) return;
      widget = mountQidConnect(mount.current, {
        api: "/api/qid",
        appName,
        onSignedIn,
      });
    })();
    return () => {
      cancelled = true;
      widget?.unmount();
    };
  }, [appName, onSignedIn]);

  return <div ref={mount} />;
}
