// Metro module 11954 (f11955).
import { useMemo } from "react";
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import AvatarUtils from "../../../../utils/AvatarUtils";
import EmojiUtils from "../../../../utils/EmojiUtils";
import Emoji from "../../../emojis/native/Emoji";
import { Text } from "../../../../design/components/Text/native/Text";
let useStyles, GuildProfileTraitView;
const TraitEmoji = function TraitEmoji(props) {
  const emoji = props.emoji;
  const styles = useStyles();
  if (emoji == null) {
    return null;
  }
  return <Emoji src={emoji.id != null ? AvatarUtils.getEmojiURL({
    id: emoji.id,
    animated: emoji.animated,
    size: 16
  }) : void 0} name={EmojiUtils.isCustomEmoji(emoji) ? emoji.name : emoji.surrogates} fastImageStyle={styles.emojiImage} />;
};
GuildProfileTraitView = function GuildProfileTraitView(props) {
  const trait = props.trait;
  return <View style={useStyles().trait}>
    <TraitEmoji emoji={trait.emoji} />
    <Text variant="text-sm/medium" color="text-default">{trait.label}</Text>
  </View>;
};
useStyles = createStyles({
  container: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8
  },
  trait: {
    display: "flex",
    flexDirection: "row",
    gap: 4,
    alignItems: "center",
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: Module712.radii.lg,
    borderWidth: 1,
    borderStyle: "solid",
    borderColor: Module712.colors.BORDER_SUBTLE
  },
  emojiImage: {
    width: 16,
    height: 16
  }
});
export default function GuildProfileTraits(props) {
  const profile = props.profile;
  return <View style={useStyles().container}>
    {useMemo(() => profile.traits.map((trait, index) => ({
      key: `trait-${index}`,
      ...trait
    })).filter((item) => item.label.length > 0), [profile]).map((item) => <GuildProfileTraitView key={item.key} trait={item} />)}
  </View>;
};