// Metro module 8749 (f8750).
import { View } from "react-native";
import { VerticalGradient } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { t, intl } from "../../../intl/index.native";
import Module4611 from "../../../_bundle/Module4611";
import FastImage from "../../../components_native/common/FastImage";
import Module8750 from "../../../_bundle/Module8750";
import NitroIcon from "./NitroIcon";
import { CheckmarkSmallIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkSmallIcon";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  container: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    padding: Module712.space.PX_24,
    borderRadius: Module712.radii.lg,
    overflow: "hidden",
    alignSelf: "center",
    gap: Module712.space.PX_16
  },
  gradient: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  headerImage: {
    width: 211,
    height: 157,
    resizeMode: "cover"
  },
  nitroIconContainer: {
    alignSelf: "flex-start"
  },
  benefits: {
    display: "flex",
    flexDirection: "column",
    gap: Module712.space.PX_8
  },
  benefitRow: {
    display: "flex",
    flexDirection: "row",
    gap: Module712.space.PX_8,
    alignItems: "center"
  }
});
export function FractionalNitroPreview() {
  const styles = useStyles();
  return <View style={styles.container}>
    <Module4611 colors={["#000000", "#36266d"]} start={VerticalGradient.START} end={VerticalGradient.END} style={styles.gradient} />
    <FastImage source={{
      uri: Module8750
    }} style={styles.headerImage} />
    <View style={styles.nitroIconContainer}>
      <NitroIcon />
    </View>
    <View style={styles.benefits}>
      {[t.E1NP2x, t.kpMomJ, t.xT1Vfn, t.myyAEr, t.zTk8Ul].map((item, index) => <View key={index} style={styles.benefitRow}>
        <CheckmarkSmallIcon color={Module712.colors.WHITE} />
        <Text variant="text-sm/medium" color="text-overlay-light">
          {intl.string(item)}
        </Text>
      </View>)}
    </View>
  </View>;
}