// Metro module 11662 (f11663).
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import useTheme from "../../../../hooks/useTheme";
import { isThemeDark } from "../../../../design/shared";
import GuildPowerupsCard from "./GuildPowerupsCard";
import GuildPowerupsImage from "./GuildPowerupsImage";
import Module4611 from "../../../../_bundle/Module4611";
import { Text } from "../../../../design/components/Text/native/Text";
import { GuildPowerupsCardFooter } from "./GuildPowerupsCardFooter";
import { TextBadge, BadgeColors } from "../../../../design/void/native";
import { intl, t } from "../../../../intl/index.native";
const useStyles = createStyles({
  container: {
    marginHorizontal: Module712.space.PX_16
  },
  card: {
    padding: 0,
    overflow: "hidden"
  },
  contentContainer: {
    gap: Module712.space.PX_16,
    padding: Module712.space.PX_16
  },
  imageContainer: {
    width: "100%",
    height: 160
  },
  gradient: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    height: "100%"
  },
  headerContainer: {
    gap: Module712.space.PX_4
  },
  badge: {
    position: "absolute",
    top: Module712.space.PX_12,
    right: Module712.space.PX_12
  }
});
export default function GuildPowerupsPerkCard(props) {
  const { title, description, imageUrl: _imageUrl, isImageAnimated: _isImageAnimated, riveComponent: _riveComponent, style, onPress, status, badge, ...props2 } = props;
  let imageUrl = props.imageUrl;
  let isImageAnimated = props.isImageAnimated;
  if (isImageAnimated === void 0) {
    isImageAnimated = true;
  }
  let riveComponent = props.riveComponent;
  const styles = useStyles();
  const colors = isThemeDark(useTheme()) ? ["#0f101100", "#0f101166"] : ["#0f101100", "#0f10111a"];
  if (riveComponent == null) {
    if (imageUrl == null) {
      imageUrl = "";
    }
    riveComponent = <GuildPowerupsImage imageUrl={imageUrl} isAnimated={isImageAnimated} />;
  }
  return <GuildPowerupsCard containerStyle={[styles.container, style]} style={styles.card} status={status} onPress={onPress}>
    <View style={styles.imageContainer}>
      {riveComponent}
      <Module4611 colors={colors} style={styles.gradient} />
    </View>
    <View style={styles.contentContainer}>
      <View style={styles.headerContainer}>
        <Text variant="heading-md/bold">{title}</Text>
        <Text variant="text-sm/medium">{description}</Text>
      </View>
      <GuildPowerupsCardFooter {...props2} status={status} />
    </View>
    {badge === "new" && <TextBadge text={intl.string(t.y2b7CA)} style={styles.badge} />}
    {badge === "beta" && <TextBadge text={intl.string(t.oW0eUd)} color={BadgeColors.BRAND} style={styles.badge} />}
  </GuildPowerupsCard>;
};