import { Streambird } from "@streambird/streambird-react";
import { ErrorData, SuccessData, WalletType } from '@streambird/streambird-js';

const App = () => {
  const streambirdConfig = {
    emailMagicLink: {
      loginRedirectUrl: 'LOGIN_REDIRECT_URL_FROM_PORTAL_GOES_HERE',
      registrationRedirectUrl: 'REGISTRATION_REDIRECT_URL_FROM_PORTAL_GOES_HERE',
      loginExpiresIn: 5,
      registrationExpireIn: 5,
      requiresVerification: false,
      autoVerify: true
    },
    componentStyle: {
      width: 500,
      showHeaderText: true,
      headerText: 'Sign in or register',
      headerTextColor: '',
      bodyText: 'Please enter your email address',
      bodyTextColor: '#333333',
      buttonTextColor: '#FFFFFF',
      buttonColor: '',
      errMsgColor: '',
      showContainerBorder: true,
      containerXAlignment: 'center',
      containerYAlignment: 'center',
      bodyTextPosition: 'center',
      headerTextPosition: 'center'
    },
    wallet: {
      walletType: 'ETH',
      network: 'https://goerli.infura.io/v3/INFURA_API_KEY'
    }
  }

  const handleCallbacks = {
    onSuccess: (data: SuccessData) => {
      console.log(data)
    },
    onError: (data: ErrorData) => {
      console.log(data)
    }
  }

  return (
    <div id="login">
      <Streambird
        publicToken={"YOUR_API_KEY_HERE"}
        config={streambirdConfig}
        callbacks={handleCallbacks}
      />
    </div>
  );
};

export default App;

  {
    eventType: 'EVENT_SUCCESS', 
    eventData: {
      publicAddress: "xvPgUXBKTPUBrBdZWHajG17nWM59Zmx7s5NhXXXXXXX",
      sessionJwt: "eyJhbGciOiJ...",
      sessionToken: "TqXsQbXoTxKvjRAqVyLjrz8cRdQRM4enTUh9ixkoeClcgldtzs4LUxEB1XXXXXXX",
      walletType: "SOL",
      public_address: "xvPgUXBKTPUBrBdZWHajG17nWM59Zmx7s5NhXXXXXXX", // legacy field
      session_token: "TqXsQbXoTxKvjRAqVyLjrz8cRdQRM4enTUh9ixkoeClcgldtzs4LUxEB1XXXXXXX", // legacy field
      wallet_type: "SOL" // legacy field
    }
  }