import ThemedImage from "@/components/docusaurus/themed-image";
import AuthType from "./_auth-type.mdx";
import RedirectURIs from "./_redirect-uris.mdx";
import GenerateKey from "./_generate-key.mdx";
import ReviewConfig from "./_review-config.mdx";

export default function CreateApp(props) {
  return (
    <div>
      <h3>
        Create the {props.appName ? props.appName + " app" : "application"}
      </h3>
      <p>
        Go to the detail page of your project and click the "+"-button in the
        application-section. This will lead you to the the creation wizard.
      </p>
      <img
        alt="Add application"
        src="/docs/img/guides/console/addapplication.png"
        width="120px"
      />
      <p>
        Create the app by setting a name and select the application type "Web"
      </p>
      <img
        alt={"create " + props.appType + " preview"}
        src={"/img/guides/application/create-" + props.appType + "-app.png"}
      />
      <h3>Select the authentication method</h3>
      <p>
        The authentication method defines the communication flow during a login
      </p>
      <AuthType components={props.components}  appType={props.appType} authType={props.authType} />
      <h3>Redirect URIs</h3>
      <RedirectURIs components={props.components}
        appType={props.appType}
        redirectURI={props.redirectURI}
        postLogoutURI={props.postLogoutURI}
      />
      <h3>Review your settings</h3>
      <ReviewConfig components={props.components}  appType={props.appType} authType={props.authType} />
      <GenerateKey components={props.components}  appType={props.appType} authType={props.authType} />
    </div>
  );
}