// Metro module 12159 (f12160).
import { Image as Image2, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { resolveTextComponentValues, ResolvedValueType } from "../../../_bundle/Module12070";
import { FieldText } from "../../user_profile/native/UserProfileApplicationWidgetFieldUtils";
import { ImageSkeleton } from "../../user_profile/native/UserProfileApplicationWidgetSkeletons";
const useStyles = createStyles({
  contentRow: {
    flexDirection: "row",
    gap: Module712.space.PX_12,
    alignItems: "center"
  },
  text: {
    flex: 1,
    gap: Module712.space.PX_4
  },
  imageContainer: {
    width: 96,
    height: 96,
    marginTop: Module712.space.PX_12,
    marginBottom: Module712.space.PX_16,
    borderRadius: Module712.radii.md,
    overflow: "hidden",
    borderWidth: 1,
    borderColor: Module712.colors.BORDER_SUBTLE,
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  image: {
    width: "100%",
    height: "100%"
  },
  imageSkeleton: {
    width: 96,
    height: 96,
    marginTop: Module712.space.PX_12,
    marginBottom: Module712.space.PX_16
  }
});
export default function UserProfileApplicationWidgetTopContainedLayout(props) {
  const { header, topConfig, resolveFieldValue, numberFormat } = props;
  const styles = useStyles();
  const field = resolveTextComponentValues(topConfig.components.title, resolveFieldValue, numberFormat, true);
  const field4 = resolveTextComponentValues(topConfig.components.subtitle_1, resolveFieldValue, numberFormat);
  const field3 = resolveTextComponentValues(topConfig.components.subtitle_2, resolveFieldValue, numberFormat);
  const field2 = resolveTextComponentValues(topConfig.components.subtitle_3, resolveFieldValue, numberFormat);
  const contained_image = topConfig.components.contained_image;
  const r15 = resolveFieldValue(contained_image == null ? void 0 : contained_image.fields.image, [ResolvedValueType.MEDIA]);
  return <View>
    {header}
    <View style={styles.contentRow}>
      <View style={styles.text}>
        <FieldText field={field} variant="text-lg/medium" color="text-default" />
        <FieldText field={field4} variant="text-sm/normal" color="text-muted" />
        <FieldText field={field3} variant="text-sm/normal" color="text-muted" />
        <FieldText field={field2} variant="text-sm/normal" color="text-muted" />
      </View>
      {r15 != null ? <View style={styles.imageContainer}>
        <Image2 source={{
          uri: r15.media.url
        }} style={styles.image} resizeMode="contain" />
      </View> : <ImageSkeleton style={styles.imageSkeleton} />}
    </View>
  </View>;
};