// Metro module 8513 (f8514).
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { ObscuredSurfaceContext, OBSCURED_VALUE } from "../ObscuredSurfaceContext";
import { ImageWarningIcon } from "../../../design/components/Icon/native/redesign/generated/ImageWarningIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
const useStyles = createStyles({
  container: {
    position: "relative",
    overflow: "hidden"
  },
  content: {
    pointerEvents: "none",
    userSelect: "none"
  },
  cover: {
    position: "absolute",
    inset: 0,
    zIndex: 1,
    backgroundColor: Module712.colors.SPOILER_HIDDEN_BACKGROUND
  },
  warning: {
    position: "absolute",
    insetInlineStart: "50%",
    top: "50%",
    transform: "translate(-50%, -50%)",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: Module712.space.PX_8,
    paddingHorizontal: Module712.space.PX_12,
    paddingVertical: Module712.space.PX_8,
    textAlign: "center",
    userSelect: "none",
    zIndex: 2
  }
});
export default function ObscuredSurface(props) {
  const obscured = props.obscured;
  let heading = props.heading;
  let description = props.description;
  const children = props.children;
  const styles = useStyles();
  let r21 = children;
  if (obscured) {
    const Provider = ObscuredSurfaceContext.Provider;
    const r31 = [<View style={styles.content} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" accessible={false} aria-hidden>{children}</View>, <View style={styles.cover} />, ,];
    const r46 = [<ImageWarningIcon size="lg" color={Module712.colors.TEXT_DEFAULT} />, , ,];
    if (heading == null) {
      heading = intl.string(t.xC8Saf);
    }
    r46[1] = <Text variant="heading-md/semibold" color="text-strong">{heading}</Text>;
    if (description == null) {
      description = intl.string(t["0fc/DG"]);
    }
    r46[2] = <Text variant="text-sm/normal" color="text-muted">{description}</Text>;
    r31[2] = <View style={styles.warning}>{r46}</View>;
    r21 = <Provider value={OBSCURED_VALUE}>
      <View style={styles.container}>{r31}</View>
    </Provider>;
  }
  return r21;
};