// Metro module 14771 (f14772).
import { ScrollView } from "react-native";
import useWideAuthView from "../../../auth/native/useWideAuthView";
import MfaScreenUtils from "../MfaScreenUtils";
import { SafeAreaPaddingView } from "../../../../components_native/common/SafeAreaView";
import { Stack } from "../../../../design/components/Stack/native/Stack.native";
import { Text } from "../../../../design/components/Text/native/Text";
import BackButton from "../components/BackButton";
import BackgroundImage from "../../../auth/native/components/atoms/BackgroundImage";
export default function MFAOptionScreen(props) {
  const { headerText, headerImage, subtitle, input, submit, screenProps, mfaMethod, error, content } = props;
  const wideAuthView = useWideAuthView();
  const styles = MfaScreenUtils.useScreenStyles(wideAuthView);
  const type = screenProps.mfaChallenge.methods[0]?.type;
  const r48 = [headerImage != null && headerImage, <Text variant="heading-xl/extrabold" style={styles.mfaContainerHeaderText}>{headerText}</Text>, subtitle != null && <Text variant="heading-sm/normal" color="text-default">{subtitle}</Text>, ,];
  const r58 = error != null && <Text variant="text-sm/normal" color="text-feedback-critical">{error}</Text>;
  let r63 = type === mfaMethod;
  r48[3] = r58;
  const r68 = [<Stack>
    <Stack style={styles.mfaContainerHeader} spacing={4}>{r48}</Stack>
    {input}
  </Stack>, content, ,];
  const r74 = [submit, ,];
  if (r63) {
    r63 = <BackButton props={screenProps} />;
  }
  r74[1] = r63;
  r68[2] = <Stack style={styles.submit}>{r74}</Stack>;
  const r79 = <SafeAreaPaddingView bottom={!wideAuthView} top={!wideAuthView} style={styles.contentContainer}>{r68}</SafeAreaPaddingView>;
  return <>
    <BackgroundImage backgroundImageCover={false} />
    {wideAuthView ? <ScrollView keyboardShouldPersistTaps="handled">{r79}</ScrollView> : r79}
  </>;
};