// Metro module 11779 (f11780).
import { ScrollView, View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
import Module712 from "../../../../_bundle/Module712";
import { Text } from "../../../../design/components/Text/native/Text";
import { Button } from "../../../../design/components/Button/native/Button.native";
import { intl, t } from "../../../../intl/index.native";
const useStyles = createStyles({
  scrollContainer: {
    minHeight: "100%"
  },
  container: {
    flexGrow: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  alertContainer: {
    paddingTop: 80 + NAV_BAR_HEIGHT
  },
  alert: {
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderRadius: Module712.radii.xl,
    borderWidth: 1,
    borderColor: Module712.colors.INTERACTIVE_BACKGROUND_ACTIVE,
    alignItems: "center",
    maxWidth: 290,
    ...Module712.shadows.SHADOW_HIGH
  },
  alertContent: {
    paddingVertical: 24,
    paddingHorizontal: 24,
    alignItems: "center"
  },
  alertTitle: {
    paddingBottom: 8,
    textAlign: "center"
  },
  alertSubtitle: {
    paddingBottom: Module712.space.PX_16,
    textAlign: "center"
  },
  buttonWrapper: {
    flexDirection: "row"
  },
  primaryButtonContainer: {
    marginBottom: Module712.space.PX_12
  },
  trailing: {
    flexGrow: 0,
    padding: Module712.space.PX_16
  }
});
export default function NewUserPermissionsOnboarding(props) {
  const { title, subtitle, header, trailing, loading } = props;
  let showSkip = props.showSkip;
  if (showSkip === void 0) {
    showSkip = true;
  }
  const { onAllow, onDontAllow } = props;
  const styles = useStyles();
  const r31 = [header, ,];
  const r39 = [<Text style={styles.alertTitle} variant="heading-lg/bold" color="text-default">{title}</Text>, <Text style={styles.alertSubtitle} variant="text-sm/medium" color="text-default">{subtitle}</Text>, <View style={[styles.buttonWrapper, showSkip ? styles.primaryButtonContainer : showSkip]}>
    <Button variant="primary" size="md" text={intl.string(t["2nYlT2"])} onPress={onAllow} loading={loading} grow />
  </View>, ,];
  if (showSkip) {
    showSkip = <View style={styles.buttonWrapper}>
      <Button variant="secondary" text={intl.string(t["5Wxrcd"])} onPress={onDontAllow} grow />
    </View>;
  }
  r39[3] = showSkip;
  r31[1] = <View style={styles.alert}>
    <View style={styles.alertContent}>{r39}</View>
  </View>;
  return <ScrollView contentContainerStyle={styles.scrollContainer}>
    <View style={styles.container}>
      <View style={styles.alertContainer}>
        <View>{r31}</View>
      </View>
    </View>
    <View style={styles.trailing}>{trailing}</View>
  </ScrollView>;
};