// Metro module 9711 (f9712).
import { memo } from "react";
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { GiftPlanSelectionCardBanner_AssetVariant } from "../../../../_bundle/Module6279";
import { useThemeAndReducedMotionAwareAssetUrl } from "../../promotions/MarketingComponentHooks";
import Module4611 from "../../../../_bundle/Module4611";
import FastImage from "../../../../components_native/common/FastImage";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import PremiumFeaturesPromotionalLogo from "./PremiumFeaturesPromotionalLogo";
const useStyles = createStyles(() => ({
  gradient: {
    minHeight: 60
  },
  bannerImage: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    width: "100%",
    aspectRatio: 5
  },
  content: {
    minHeight: 60,
    justifyContent: "center",
    gap: 2,
    paddingTop: Module712.space.PX_12,
    paddingBottom: Module712.space.PX_12,
    paddingStart: Module712.space.PX_24,
    paddingEnd: 120
  },
  heading: {},
  subheading: {},
  logoContainer: {
    position: "absolute",
    top: 0,
    bottom: 0,
    right: 10,
    justifyContent: "center",
    alignItems: "center"
  },
  logoContainerLargeTilted: {
    transform: [{
      rotate: "-7deg"
    }, {
      translateY: 8
    }]
  },
  logo: {
    width: 95,
    height: 95
  },
  logoLargeTilted: {
    width: 120,
    height: 120
  }
}));
const r29 = memo(function PremiumGiftPlanSelectPromotionalBanner(props) {
  const { giftPlanSelectionCardBannerComponent, claimableRewards, isSelected, onLayout } = props;
  const styles = useStyles();
  const { gradient, assetVariant } = giftPlanSelectionCardBannerComponent;
  const LARGE_TILTED = GiftPlanSelectionCardBanner_AssetVariant.LARGE_TILTED;
  const themeAndReducedMotionAwareAssetUrl2 = useThemeAndReducedMotionAwareAssetUrl(giftPlanSelectionCardBannerComponent.mobileBannerAsset);
  const themeAndReducedMotionAwareAssetUrl = useThemeAndReducedMotionAwareAssetUrl(giftPlanSelectionCardBannerComponent.avatarAsset, true);
  let angle = gradient?.angle;
  if (angle == null) {
    angle = 90;
  }
  let colors = gradient?.colors;
  if (colors == null) {
    colors = [];
  }
  const r51 = [themeAndReducedMotionAwareAssetUrl2 != null && <FastImage style={styles.bannerImage} resizeMode="cover" source={{
    uri: themeAndReducedMotionAwareAssetUrl2
  }} />, <View style={styles.content}>
    <Text style={styles.heading} variant="text-md/bold" color="text-overlay-light">
      {intl.string(t.OEtqpm)}
    </Text>
    <Text style={styles.subheading} variant="text-md/medium" color="text-overlay-light">
      {intl.formatToPlainString(t["2h5M+X"], {
        availableCount: claimableRewards.length
      })}
    </Text>
  </View>, ,];
  let r87 = themeAndReducedMotionAwareAssetUrl != null;
  if (r87) {
    let r88 = assetVariant === LARGE_TILTED;
    const style = [styles.logoContainer, r88 ? styles.logoContainerLargeTilted : r88];
    const promoRotatingStyle = [styles.logo, ,];
    if (r88) {
      r88 = styles.logoLargeTilted;
    }
    promoRotatingStyle[1] = r88;
    r87 = <View style={style}>
      <PremiumFeaturesPromotionalLogo shouldAnimate={isSelected} promoRotatingStyle={promoRotatingStyle} rotatingAvatarImageUrl={themeAndReducedMotionAwareAssetUrl} />
    </View>;
  }
  r51[2] = r87;
  return <Module4611 style={styles.gradient} useAngle angle={angle} angleCenter={{
    x: 0.5,
    y: 0.5
  }} colors={colors} onLayout={onLayout}>{r51}</Module4611>;
});
export default r29;