import React from 'react';
import { MonoButton, useMono } from 'react-mono-js';

export default function App() {
  const config = {
    public_key: 'YOUR_CONNECT_PUBLIC_KEY',
    onClose: () => {},
    onSuccess: (response) => {
      console.log(response.code);

      /**
        response : { "code": "code_xyz" }
        you can send this code back to your server to get this
        authenticated account and start making requests.
      */
    },
  };

  const handleMono = useMono({ public_key: 'YOUR_CONNECT_PUBLIC_KEY' });

  return (
    <div className="App">
      <h1>React Wrapper for Mono enrollments</h1>
      <h2>Check it out!</h2>

      <button
        onClick={() =>
          handleMono({
            onClose: () => null,
            onSuccess: (response) => {
              console.log(response.code);
            },
          })
        }
      >
        Connect bank with Mono
      </button>

      <MonoButton {...config} text="Connect bank with Mono!" />
    </div>
  );
}