// Metro module 12162 (f12163).
import { Image as Image2, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { ResolvedValueType, resolveSingleStringOrSkeleton } from "../../../_bundle/Module12070";
import { ImageSkeleton, TextSkeleton } from "../../user_profile/native/UserProfileApplicationWidgetSkeletons";
import { Text } from "../../../design/components/Text/native/Text";
let useStyles;
const CollectionItem = function CollectionItem(props) {
  const { componentConfig, resolveFieldValue } = props;
  const styles = useStyles();
  const r17 = resolveFieldValue(componentConfig == null ? void 0 : componentConfig.fields.image, [ResolvedValueType.MEDIA]);
  const r16 = resolveSingleStringOrSkeleton(componentConfig, "name", resolveFieldValue);
  const r13 = resolveSingleStringOrSkeleton(componentConfig, "description", resolveFieldValue);
  return <View style={styles.item}>
    {r17 != null ? <Image2 source={{
      uri: r17.media.url
    }} style={styles.itemImage} resizeMode="contain" /> : <ImageSkeleton style={styles.itemImage} />}
    <View style={styles.itemContent}>
      {r16.status === "value" ? <Text variant="text-xs/medium" lineClamp={2}>{r16.text}</Text> : <TextSkeleton variant="text-xs/medium" widthChars={6} />}
      {r13.status === "value" ? <Text variant="text-xxs/medium" color="text-subtle" lineClamp={2}>{r13.text}</Text> : <TextSkeleton variant="text-xxs/medium" widthChars={10} />}
    </View>
  </View>;
};
useStyles = createStyles({
  grid: {
    flexDirection: "row",
    flexWrap: "wrap",
    rowGap: Module712.space.PX_16,
    columnGap: Module712.space.PX_16
  },
  item: {
    width: "47%",
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_12
  },
  itemImage: {
    width: 48,
    height: 48,
    borderRadius: Module712.radii.sm,
    overflow: "hidden",
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  itemContent: {
    flex: 1,
    gap: Module712.space.PX_4,
    minWidth: 0
  }
});
export default function UserProfileApplicationWidgetBottomCollectionLayout(props) {
  const { bottomConfig, resolveFieldValue } = props;
  return <View style={useStyles().grid}>
    <CollectionItem componentConfig={bottomConfig.components.item_1} resolveFieldValue={resolveFieldValue} />
    <CollectionItem componentConfig={bottomConfig.components.item_2} resolveFieldValue={resolveFieldValue} />
    <CollectionItem componentConfig={bottomConfig.components.item_3} resolveFieldValue={resolveFieldValue} />
    <CollectionItem componentConfig={bottomConfig.components.item_4} resolveFieldValue={resolveFieldValue} />
  </View>;
};