// Metro module 14789 (f14790).
import { memo } from "react";
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { UserIcon } from "../../../../design/components/Icon/native/redesign/generated/UserIcon";
import { intl, t } from "../../../../intl/index.native";
import { ChatSmileIcon } from "../../../../design/components/Icon/native/redesign/generated/ChatSmileIcon";
import { FolderIcon } from "../../../../design/components/Icon/native/redesign/generated/FolderIcon";
import { NitroWumpusFlightRight3dIllustration } from "../../../../design/assets/native";
import { Text } from "../../../../design/components/Text/native/Text";
import { getDisplayNameFromSku } from "../../../../utils/PremiumUtils";
import PremiumPerksList from "../../../../components_native/premium/PremiumPerksList";
import { Button } from "../../../../design/components/Button/native/Button.native";
import { NitroWheelIcon } from "../../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
const useStyles = createStyles({
  contentContainer: {
    paddingHorizontal: 36,
    paddingTop: 18,
    paddingBottom: 36,
    width: "100%",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    alignItems: "flex-start",
    display: "flex",
    flexDirection: "column",
    gap: 0
  },
  buttonContainer: {
    marginVertical: 6,
    width: "100%",
    height: 48
  },
  title: {
    width: "100%",
    textAlign: "center"
  },
  heroIllustrationContainer: {
    alignItems: "center",
    justifyContent: "center",
    height: 188,
    width: "100%"
  }
});
const r37 = memo(function PremiumTrialOfferActionSheetContent(props) {
  const { trialOffer, intervalDuration, onConfirm } = props;
  const styles = useStyles();
  const subscription_trial = trialOffer?.subscription_trial;
  const perks = [{
    IconComponent: UserIcon,
    label: intl.string(t.kpMomJ),
    description: intl.string(t.uVUtPw)
  }, {
    IconComponent: ChatSmileIcon,
    label: intl.string(t["R2IV/Q"]),
    description: intl.string(t["3SUJLd"])
  }, {
    IconComponent: FolderIcon,
    label: intl.string(t["u/NJKc"]),
    description: intl.string(t.i1UuMk)
  }];
  return <View style={styles.contentContainer}>
    <View style={styles.heroIllustrationContainer}>
      <NitroWumpusFlightRight3dIllustration width={180} height={180} />
    </View>
    <Text variant="heading-xl/bold" color="mobile-text-heading-primary" style={styles.title}>
      {intl.formatToPlainString(t.q8eMc0, {
        displayName: subscription_trial?.sku_id != null ? getDisplayNameFromSku(subscription_trial?.sku_id) : null,
        duration: intervalDuration
      })}
    </Text>
    <PremiumPerksList perks={perks} />
    <View style={styles.buttonContainer}>
      <Button size="lg" text={intl.formatToPlainString(t.xASjq5, {
        duration: intervalDuration
      })} onPress={onConfirm} grow icon={<NitroWheelIcon size="md" color={Module712.unsafe_rawColors.WHITE} />} />
    </View>
  </View>;
});
export default r37;