// Metro module 13906 (f13907).
import { Image as Image2, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { useHasActiveLinks, useHasMaxConnections } from "../hooks/useUserLinks";
import useIsInAdultAgeGroup from "../hooks/useIsInAdultAgeGroup";
import { FamilyCenterParentQRCodeButton, FamilyCenterTeenQRCodeButton } from "./FamilyCenterBannerButton";
import Module712 from "../../../_bundle/Module712";
import { useAgeSpecificText } from "../hooks/useAgeSpecificText";
import { intl } from "../../../intl/index.native";
import FamilyCenter_messages from "../FamilyCenter.messages";
import Module13914 from "../../../_bundle/Module13914";
import Module13915 from "../../../_bundle/Module13915";
import { Text } from "../../../design/components/Text/native/Text";
let useStyles, useStyles2;
const FamilyCenterActivityBannerButton = function FamilyCenterActivityBannerButton() {
  let r19;
  L7: {
    const styles = useStyles();
    const hasActiveLinks = useHasActiveLinks();
    const isInAdultAgeGroup = useIsInAdultAgeGroup();
    const hasMaxConnections = useHasMaxConnections();
    r19 = null;
    if (!hasMaxConnections) {
      if (isInAdultAgeGroup) {
        r19 = null;
        if (hasActiveLinks) {
          break L7;
        }
      }
      r19 = <View style={styles.container}>
        {isInAdultAgeGroup ? <FamilyCenterParentQRCodeButton /> : <FamilyCenterTeenQRCodeButton />}
      </View>;
    }
  }
  return r19;
};
useStyles = createStyles({
  container: {
    width: "100%"
  }
});
useStyles2 = createStyles({
  container: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    marginTop: 16,
    padding: 24,
    alignItems: "center",
    borderRadius: Module712.radii.md,
    elevation: 2
  },
  art: {
    maxWidth: 243,
    maxHeight: 119,
    marginBottom: Module712.space.PX_8
  },
  header: {
    marginBottom: Module712.space.PX_8,
    textAlign: "center"
  },
  description: {
    textAlign: "center"
  }
});
export default function FamilyCenterActivityBanner() {
  const isInAdultAgeGroup = useIsInAdultAgeGroup();
  const styles2 = useStyles2();
  const hasMaxConnections = useHasMaxConnections();
  return <View style={styles2.container}>
    <Image2 source={isInAdultAgeGroup ? Module13914 : Module13915} style={styles2.art} />
    <Text style={styles2.header} variant="heading-lg/semibold">
      {useAgeSpecificText(intl.string(FamilyCenter_messages["T7GyW+"]), intl.string(FamilyCenter_messages.goKE2b))}
    </Text>
    <Text style={styles2.description} variant="text-sm/medium" color="text-muted">
      {useAgeSpecificText(intl.format(FamilyCenter_messages.MXjDSv, {
        articleLink: "https://support.discord.com/hc/articles/14155060633623"
      }), intl.format(FamilyCenter_messages.EMCf6j, {
        articleLink: "https://support.discord.com/hc/articles/14155043715735"
      }))}
    </Text>
    {hasMaxConnections ? null : <FamilyCenterActivityBannerButton />}
  </View>;
};