import {
  AuthFlowType,
  B2BProducts,
  StytchB2B,
} from "@stytch/react/b2b";

const Login = () => {
  // Set the login flow
  // See below for examples of the different login flows
  const config = {
    products: [B2BProducts.emailMagicLinks],
    sessionOptions: { sessionDurationMinutes: 60 },
    authFlowType: AuthFlowType.Discovery,
  };

  // Set the styles for the prebuilt UI
  const presentation = {
    theme: { 'font-family': 'Arial' },
    options: { hideHeaderText: true },
  };

  // Set the callbacks to fire as a result of events from the prebuilt UI
  const callbacks = {
    onEvent: ({ type, data }) => {
      console.log(type, data);
    },
    onError: (data) => {
      console.log(data);
    },
  };

  // Customize the text in the prebuilt UI
  const strings = {
    'organizationLogin.title': 'Proceed to your {organizationName} account',
  };

  return (
    <StytchB2B
      config={config}
      presentation={presentation}
      callbacks={callbacks}
      strings={strings}
    />
  );
};

export default Login;