// Metro module 13953 (f13954).
import { View } from "react-native";
import UserStore from "../../../stores/UserStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
import { Avatar, AvatarSizes, Icon } from "../../../design/void/native";
const useStyles = createStyles({
  avatars: {
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderRadius: Module712.radii.round,
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 8
  },
  icon: {
    height: 24,
    width: 24,
    marginHorizontal: 16
  }
});
export default function FamilyCenterAvatarPair(props) {
  const { otherUser, iconSrc, iconStyles } = props;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  return stateFromStores !== void 0 ? otherUser !== void 0 ? <View style={styles.avatars}>
    <Avatar size={AvatarSizes.LARGE_48} user={stateFromStores} guildId={void 0} avatarDecoration={stateFromStores.avatarDecoration} />
    <Icon style={[styles.icon, iconStyles]} size={Icon.Sizes.EXTRA_SMALL} source={iconSrc} />
    <Avatar size={AvatarSizes.LARGE_48} user={otherUser} guildId={void 0} avatarDecoration={otherUser.avatarDecoration} />
  </View> : null : null;
};