// Metro module 12160 (f12161).
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { resolveStatComponentValues } from "../../../_bundle/Module12070";
import { formatDurationNarrow, FieldText } from "../../user_profile/native/UserProfileApplicationWidgetFieldUtils";
import { Text } from "../../../design/components/Text/native/Text";
import { TextSkeleton } from "../../user_profile/native/UserProfileApplicationWidgetSkeletons";
const useStyles = createStyles({
  statsGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
    rowGap: Module712.space.PX_16,
    columnGap: Module712.space.PX_12
  },
  stat: {
    width: "47%",
    gap: Module712.space.PX_4
  }
});
export default function UserProfileApplicationWidgetBottomStatsLayout(props) {
  const { bottomConfig, resolveFieldValue, numberFormat } = props;
  const styles = useStyles();
  return <View style={styles.statsGrid}>
    {[1, 2, 3, 4, 5, 6].map((item) => resolveStatComponentValues(bottomConfig.components[`stat_${item}`], resolveFieldValue, numberFormat, formatDurationNarrow, true)).map((item, index) => item != null && <View key={index} style={styles.stat}>
      <FieldText field={item.value} variant="text-sm/medium" color="text-default" skeletonWidthChars={8} />
      {item.label.status === "value" ? <Text variant="text-xs/normal" color="text-muted">{item.label.text}</Text> : item.label.status === "skeleton" ? <TextSkeleton variant="text-xs/normal" widthChars={6} /> : null}
    </View>)}
  </View>;
};