// Metro module 11644 (f11645).
import { View } from "react-native";
import { BoostInfoType } from "../constants/GuildPowerupsConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { getGuildPowerupsBoostInfoText } from "../utils/getGuildPowerupsBoostInfoText";
import { BoostGemIcon } from "../../../../design/components/Icon/native/redesign/generated/BoostGemIcon";
import { Text } from "../../../../design/components/Text/native/Text";
const useStyles = createStyles({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: Module712.space.PX_12
  },
  headerContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    display: "flex"
  }
});
export default function GuildPowerupsBoostInfo(props) {
  const { count, type } = props;
  const styles = useStyles();
  const guildPowerupsBoostInfoText = getGuildPowerupsBoostInfoText(count, type);
  return <View style={styles.container} accessible accessibilityLabel={`${count}, ${guildPowerupsBoostInfoText}`}>
    <View style={styles.headerContainer} importantForAccessibility="no-hide-descendants" accessible={false}>
      <BoostGemIcon size="sm" color={type === BoostInfoType.AVAILABLE ? Module712.unsafe_rawColors.GUILD_BOOSTING_PINK : Module712.colors.TEXT_MUTED} />
      <Text variant="text-lg/medium" color={type === BoostInfoType.AVAILABLE ? "text-strong" : "text-subtle"} importantForAccessibility="no-hide-descendants">{count}</Text>
    </View>
    <Text variant="text-md/normal" color="text-subtle" importantForAccessibility="no-hide-descendants">{guildPowerupsBoostInfoText}</Text>
  </View>;
};