import React from "react";
import { Button, ResetContainer, useModal } from "@multiplatform.one/connectkit";

// Standalone trigger for the GPG flow. GPG is NOT a wallet connector — there is nothing
// to connect first — so this button simply opens the SAME modal straight to the GPG
// screen (no connect step), mirroring how the SIWE button opens its screen.
type ButtonProps = {
  children?: React.ReactNode;
};

export const GPGButton: React.FC<ButtonProps> = ({ children }) => {
  // GPG is connection-free: open the SAME modal straight to its screen via the
  // generic registry opener (gpg registers the 'signInWithGpg' screen).
  const { openScreen } = useModal();
  return (
    <Button
      key="button"
      style={{ margin: 0 }}
      arrow
      // preventDefault so we never submit a surrounding host <form> (e.g. keycloak's
      // login form) — the underlying styled button can render as type=submit.
      onClick={(e?: { preventDefault?: () => void }) => {
        e?.preventDefault?.();
        openScreen("signInWithGpg");
      }}
    >
      {children ?? "Sign in with GPG"}
    </Button>
  );
};

const GPGButtonComponent: React.FC<ButtonProps> = ({ ...props }) => (
  <ResetContainer>
    <GPGButton {...props} />
  </ResetContainer>
);
export default GPGButtonComponent;