// Metro module 15706 (f15707).
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
import { useMutualGuildsForMessageRequests } from "../hooks/useMutualGuilds";
import { intl, t } from "../../../intl/index.native";
import { GuildIconPile } from "../../../design/components/Pile/native/GuildIconPile.native";
import { Text } from "../../../design/components/Text/native/Text";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
const useStyles = createStyles({
  container: {
    flexDirection: "row",
    alignItems: "center",
    gap: 4
  },
  label: {
    flexShrink: 1
  }
});
export default function MessageRequestMutualServers(props) {
  const { userId, style, onPress, iconSize = GuildIconSizes.XXSMALL_12 } = props;
  const XXSMALL_12 = iconSize;
  const { textVariant = "text-xs/medium", suffix } = props;
  const styles = useStyles();
  const mutualGuildsForMessageRequests = useMutualGuildsForMessageRequests(userId);
  const length = mutualGuildsForMessageRequests.length;
  const r22 = mutualGuildsForMessageRequests.slice(0, 3);
  const r19 = length > 0 ? intl.format(t.eE3oep, {
    count: length
  }) : intl.string(t.jpY0X5);
  const r78 = <View style={[styles.container, style]}>
    {length > 0 && <GuildIconPile size={XXSMALL_12} names={r22.map((item) => item.name)}>
      {r22.map((item) => <GuildIcon key={item.id} guild={item} size={XXSMALL_12} />)}
    </GuildIconPile>}
    <Text variant={textVariant} color="text-muted" lineClamp={1} style={styles.label}>
      {suffix != null ? `${r19} · ${suffix}` : r19}
    </Text>
  </View>;
  return onPress != null ? length > 0 ? <PressableOpacity accessibilityRole="button" onPress={onPress}>{r78}</PressableOpacity> : r78 : r78;
};