// Metro module 11720 (f11721).
import { useCallback } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useProvisionalAccountExplanationText } from "../hooks/useProvisionalAccountExplanationText";
import { Card } from "../../../design/components/Card/native/Card.native";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { CircleErrorIcon } from "../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
import UserProfileCard from "../../user_profile/native/UserProfileCard";
function $mk87885($env) {
  return (a0) => {
    const r5 = $env;
    const r2 = $env.$parent;
    return (0, r2[5])((0, r2[1])(r2[2][5]), {
      application: a0,
      textVariant: r5[1],
      iconSize: r5[0]
    }, a0.id);
  };
}
let env8022 = {};
const useStyles = createStyles(() => ({
  chatContainer: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
    gap: Module712.space.PX_8
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_4
  }
}));
export function ChatProvisionalAccountExplainerCard(props) {
  let env19092;
  const { style, userId, iconSize } = props;
  const styles = useStyles();
  const r16 = env19092 = {
    $parent: env8022
  };
  env19092[0] = iconSize;
  env19092[1] = "text-sm/semibold";
  const provisionalAccountExplanationText = useProvisionalAccountExplanationText({
    userId,
    renderApplicationName: useCallback($mk87885(r16), [iconSize, "text-sm/semibold"])
  });
  return <Card style={[styles.chatContainer, style]}>
    <View style={styles.header}>
      <Text variant="text-sm/semibold" color="text-default">
        {intl.string(t.Iyka0U)}
      </Text>
      <CircleErrorIcon size="xs" color="text-default" />
    </View>
    <Text variant="text-sm/normal" color="text-default">{provisionalAccountExplanationText}</Text>
  </Card>;
}
export function UserProfileProvisionalAccountExplainerCard(props) {
  let env19093;
  const { style, userId, iconSize } = props;
  const r10 = env19093 = {
    $parent: env8022
  };
  env19093[0] = iconSize;
  env19093[1] = "text-md/semibold";
  const provisionalAccountExplanationText = useProvisionalAccountExplanationText({
    userId,
    renderApplicationName: useCallback($mk87885(r10), [iconSize, "text-md/semibold"])
  });
  return <UserProfileCard style={style} title={intl.string(t.Iyka0U)} titleIcon={<CircleErrorIcon size="xs" color="text-default" />}>
    <Text variant="text-md/normal" color="text-default">{provisionalAccountExplanationText}</Text>
  </UserProfileCard>;
}