// Metro module 12289 (f12290).
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
import { Stack } from "../../../../design/components/Stack/native/Stack.native";
import { TrafficConeSpotIllustration } from "../../../../design/assets/native";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { URLCallout } from "../../../safety_common/native/URLCallout";
import { Button } from "../../../../design/components/Button/native/Button.native";
import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
const useStyles = createStyles({
  container: {
    padding: Module712.space.PX_16
  },
  title: {
    textAlign: "center"
  },
  warningMessage: {
    textAlign: "center"
  }
});
export default function BlockedDomainActionSheet(props) {
  const url = props.url;
  const styles = useStyles();
  return <BottomSheet startExpanded>
    <Stack spacing={16} justify="center" align="center" style={styles.container}>
      <Stack spacing={8} justify="center" align="center">
        <TrafficConeSpotIllustration />
        <Text style={styles.title} accessibilityRole="header" variant="heading-lg/extrabold" color="mobile-text-heading-primary">
          {intl.string(t["2B3wj8"])}
        </Text>
        <Text style={styles.warningMessage} variant="text-md/medium">
          {intl.format(t.jnHyYU, {})}
        </Text>
      </Stack>
      <URLCallout url={url} />
      <Button grow text={intl.string(t["/g10LC"])} onPress={() => ActionSheetActionCreators.hideActionSheet()} />
    </Stack>
  </BottomSheet>;
};