// Metro module 13944 (f13945).
import { Image as Image2, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useIsInAdultAgeGroup from "../hooks/useIsInAdultAgeGroup";
import { useAgeSpecificText } from "../hooks/useAgeSpecificText";
import { intl } from "../../../intl/index.native";
import FamilyCenter_messages from "../FamilyCenter.messages";
import Module13945 from "../../../_bundle/Module13945";
import { Text } from "../../../design/components/Text/native/Text";
import { FamilyCenterParentQRCodeButton, FamilyCenterTeenQRCodeButton } from "./FamilyCenterBannerButton";
let useStyles, useStyles2, useStyles3, FamilyCenterLinkingBannerTeenContent, useStyles4, FamilyCenterLinkingInstructionsRow;
const FamilyCenterLinkingBannerParentContent = function FamilyCenterLinkingBannerParentContent() {
  return <View style={useStyles2().container}>
    <FamilyCenterLinkingInstructionsRow index={1} header={intl.string(FamilyCenter_messages["7xxAni"])} description={intl.string(FamilyCenter_messages["1M9So2"])} />
    <FamilyCenterLinkingInstructionsRow index={2} header={intl.string(FamilyCenter_messages["AXgx+a"])} description={intl.string(FamilyCenter_messages.GzMFnb)} />
    <FamilyCenterLinkingInstructionsRow index={3} header={intl.string(FamilyCenter_messages.MZn1tG)} description={intl.string(FamilyCenter_messages["8rLBxD"])} isLast />
    <FamilyCenterParentQRCodeButton />
  </View>;
};
FamilyCenterLinkingBannerTeenContent = function FamilyCenterLinkingBannerTeenContent() {
  return <View style={useStyles3().container}>
    <FamilyCenterTeenQRCodeButton />
  </View>;
};
FamilyCenterLinkingInstructionsRow = function FamilyCenterLinkingInstructionsRow(props) {
  const { header, description, index, isLast } = props;
  const styles4 = useStyles4();
  return <View style={styles4.row}>
    <View style={styles4.circle}>
      <Text variant="heading-md/semibold" color="text-brand">{index}</Text>
    </View>
    <View style={[styles4.rowContent, isLast ? null : styles4.gap]}>
      <Text variant="heading-sm/bold">{header}</Text>
      <Text variant="text-sm/medium" color="text-muted">{description}</Text>
    </View>
  </View>;
};
useStyles = createStyles({
  container: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    marginTop: Module712.space.PX_16,
    paddingTop: 0,
    paddingBottom: Module712.space.PX_16,
    alignItems: "center",
    borderRadius: Module712.radii.md,
    elevation: 2,
    overflow: "hidden"
  },
  content: {
    padding: Module712.space.PX_16
  },
  art: {
    width: "100%",
    height: 175,
    marginBottom: Module712.space.PX_12
  },
  header: {
    marginBottom: Module712.space.PX_8
  }
});
useStyles2 = createStyles({
  container: {
    marginTop: Module712.space.PX_8,
    paddingHorizontal: Module712.space.PX_16,
    width: "100%"
  }
});
useStyles3 = createStyles({
  container: {
    width: "100%",
    paddingHorizontal: Module712.space.PX_16
  }
});
useStyles4 = createStyles({
  row: {
    display: "flex",
    flexDirection: "row",
    alignItems: "flex-start"
  },
  gap: {
    marginBottom: 12
  },
  circle: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
    width: 32,
    height: 32,
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL
  },
  rowContent: {
    marginLeft: 12,
    flex: 1
  }
});
export default function FamilyCenterLinkingBanner() {
  const styles = useStyles();
  const isInAdultAgeGroup = useIsInAdultAgeGroup();
  return <View style={styles.container}>
    <Image2 source={Module13945} style={styles.art} resizeMethod="resize" />
    <View style={styles.content}>
      <Text style={styles.header} variant="heading-lg/semibold">
        {useAgeSpecificText(intl.string(FamilyCenter_messages.zUCWEL), intl.string(FamilyCenter_messages.B0NPbp))}
      </Text>
      <Text variant="text-sm/medium" color="text-muted">
        {useAgeSpecificText(intl.format(FamilyCenter_messages.yMnoDl, {
          link: "https://support.discord.com/hc/articles/14155060633623"
        }), intl.string(FamilyCenter_messages.JsAEDi))}
      </Text>
    </View>
    {isInAdultAgeGroup ? <FamilyCenterLinkingBannerParentContent /> : <FamilyCenterLinkingBannerTeenContent />}
  </View>;
};