// Metro module 15197 (f15198).
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import GameIcon, { GameIconSizes, GameIconImageSize } from "../../game_detection/native/GameIcon";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  overflow: {
    lineHeight: 16,
    textAlign: "center",
    textAlignVertical: "center",
    padding: 4
  },
  overflowContainer: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    borderRadius: Module712.radii.xs,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  container: {
    display: "flex",
    flexDirection: "row"
  },
  modeMuted: {
    opacity: 0.3
  }
});
export default function ChannelItemEmbeddedActivities(props) {
  const { embeddedApps, size = GameIconSizes.SIZE_24 } = props;
  let muted = props.muted;
  const styles = useStyles();
  if (embeddedApps.length <= 0) {
    return null;
  }
  if (embeddedApps.length === 1) {
    if (muted) {
      muted = styles.modeMuted;
    }
    return <GameIcon game={embeddedApps[0].application} size={size} style={muted} />;
  }
  const application2 = embeddedApps[0].application;
  const application = embeddedApps[1].application;
  const r32 = embeddedApps.length - 1;
  const height = GameIconImageSize[size];
  return <View style={styles.container}>
    <GameIcon game={application2} size={size} style={{
      marginRight: 4
    }} />
    {embeddedApps.length === 2 ? <GameIcon game={application} size={size} /> : <View style={[styles.overflowContainer, {
      height,
      minWidth: height
    }]}>
      <Text style={styles.overflow} variant="text-xs/bold">
        {`+${r32}`}
      </Text>
    </View>}
  </View>;
};