// Metro module 9713 (f9714).
import { View } from "react-native";
import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../../_bundle/Module712";
import useAnalyticsLocations from "../../../../app_analytics/useAnalyticsLocations";
import useTrackImpression from "../../../../app_analytics/useTrackImpression";
import { ImpressionNames, ImpressionTypes } from "../../../../../_bundle/Module503";
import GiftingBadgeIcon from "./GiftingBadgeIcon";
import { Text } from "../../../../../design/components/Text/native/Text";
import { intl } from "../../../../../intl/index.native";
import GiftingBadge_messages from "../../GiftingBadge.messages";
const useStyles = createStyles({
  container: {
    flexDirection: "row",
    alignItems: "center",
    padding: Module712.space.PX_8,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderRadius: Module712.radii.sm,
    borderWidth: 1,
    borderStyle: "solid",
    borderColor: Module712.colors.BORDER_MUTED,
    ...Module712.shadows.SHADOW_LOW
  },
  iconContainer: {
    alignItems: "center",
    justifyContent: "center",
    padding: Module712.space.PX_8,
    marginInlineEnd: Module712.space.PX_8
  }
});
export default function GiftingBadgeProgressBanner(props) {
  const { giftsToNextTier, nextTierName, nextTierIcon, analyticsLocation } = props;
  const styles = useStyles();
  useTrackImpression({
    name: ImpressionNames.GIFTING_BADGE_PROGRESS_BANNER,
    type: ImpressionTypes.VIEW,
    properties: {
      gifts_to_next_tier: giftsToNextTier,
      next_tier: nextTierName,
      location_stack: useAnalyticsLocations.apply(void 0, [...analyticsLocation != null ? [analyticsLocation] : []]).analyticsLocations
    }
  }, {
    trackOnInitialLoad: true
  });
  return <View style={styles.container}>
    <View style={styles.iconContainer}>
      {nextTierIcon != null && <GiftingBadgeIcon icon={nextTierIcon} size={24} />}
    </View>
    <Text variant="text-md/semibold">
      {intl.formatToPlainString(GiftingBadge_messages["0+xfd9"], {
        giftsRemaining: giftsToNextTier,
        nextTier: nextTierName
      })}
    </Text>
  </View>;
};