// Metro module 11660 (f11661).
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import GuildPowerupsSectionHeader from "./GuildPowerupsSectionHeader";
import { intl } from "../../../../intl/index.native";
import GuildPowerups_messages from "../GuildPowerups.messages";
import GuildPowerupsSinglePerkCard from "./GuildPowerupsSinglePerkCard";
import GuildPowerupsMultiPerkCard from "./GuildPowerupsMultiPerkCard";
import GuildPowerupsGameServerCard from "./GuildPowerupsGameServerCard";
const useStyles = createStyles({
  container: {
    flexDirection: "column",
    gap: Module712.space.PX_16
  }
});
export default function GuildPowerupPerksSection(props) {
  const { guildId, listings } = props;
  const styles = useStyles();
  return <>
    <GuildPowerupsSectionHeader title={intl.string(GuildPowerups_messages.TV3Vm8)} description={intl.string(GuildPowerups_messages.STx9hp)} />
    <View style={styles.container}>
      {listings.map((a0, index) => {
        const type = a0.type;
        if (type === "singlePerk") {
          return <GuildPowerupsSinglePerkCard key={a0.powerup.skuId} guildId={guildId} powerup={a0.powerup} badge={a0.badge} />;
        }
        if (type === "multiPerk") {
          return <GuildPowerupsMultiPerkCard key={`${a0.group}-${index}`} guildId={guildId} listing={a0} />;
        }
        if (type === "gameServer") {
          return <GuildPowerupsGameServerCard key={`game-server-${index}`} guildId={guildId} />;
        }
        return null;
      })}
    </View>
  </>;
};