// Metro module 13778 (f13779).
import { useEffect, useCallback } from "react";
import { View } from "react-native";
import { SafetySettingsNoticeAction } from "../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { trackSafetySettingsNoticeAnalytics } from "../SafetySettingsUtils";
import { CircleInformationIcon } from "../../../design/components/Icon/native/redesign/generated/CircleInformationIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { intl } from "../../../intl/index.native";
const useStyles = createStyles({
  blockedIgnoredRedirect: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_8,
    padding: Module712.space.PX_8,
    borderRadius: Module712.radii.xs,
    borderColor: Module712.colors.TEXT_LINK,
    borderWidth: 1,
    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_INFO
  }
});
export default function SafetySettingsNotice(props) {
  let callback;
  const { label, labelHook, noticeType, count } = props;
  callback = void 0;
  const styles = useStyles();
  useEffect(() => {
    trackSafetySettingsNoticeAnalytics(noticeType, SafetySettingsNoticeAction.VIEWED);
  }, [noticeType]);
  callback = useCallback(() => {
    labelHook();
    trackSafetySettingsNoticeAnalytics(noticeType, SafetySettingsNoticeAction.LEARN_MORE);
  }, [noticeType, labelHook]);
  return <View style={styles.blockedIgnoredRedirect}>
    <CircleInformationIcon color="text-link" />
    <Text style={{
      flexShrink: 1
    }} variant="heading-sm/medium">
      {count != null ? intl.format(label, {
        hook: (a0) => <Text role="link" variant="heading-sm/medium" color="text-link" onPress={callback}>
          {a0}
        </Text>,
        count
      }) : intl.format(label, {
        hook: (a0) => <Text role="link" variant="heading-sm/medium" color="text-link" onPress={callback}>
          {a0}
        </Text>
      })}
    </Text>
  </View>;
};