// Metro module 9629 (f9630).
import { memo } from "react";
import { View } from "react-native";
import * as _StickerPickerConstants from "./StickerPickerConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { Text } from "../../../design/components/Text/native/Text";
import { isStickerPackAnimated } from "../StickersUtils";
import { Icon } from "../../../design/void/native";
import Module9630 from "../../../_bundle/Module9630";
import Module9631 from "../../../_bundle/Module9631";
import { intl, t } from "../../../intl/index.native";
import StickerPackBanner from "./StickerPackBanner";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
const { PADDING_HORIZONTAL, PADDING_VERTICAL } = _StickerPickerConstants;
const useStyles = createStyles({
  section: {
    paddingTop: PADDING_VERTICAL,
    paddingHorizontal: PADDING_HORIZONTAL,
    height: 36 + 2 * PADDING_VERTICAL,
    justifyContent: "center",
    overflow: "hidden",
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  },
  label: {
    flex: -1
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  bannerContainer: {
    aspectRatio: 3.824074074074074,
    marginVertical: -8,
    width: "100%"
  },
  banner: {
    height: "100%"
  },
  headline: {
    height: 20,
    flex: 1,
    flexDirection: "row",
    alignItems: "center"
  },
  iconContainer: {
    marginLeft: 8,
    height: 16,
    width: 16,
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BORDER_SUBTLE,
    alignItems: "center",
    justifyContent: "center"
  },
  icon: {
    color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
  },
  animatedIcon: {
    position: "relative",
    left: 1
  },
  premiumIcon: {
    position: "relative",
    left: -1
  }
});
const r64 = memo(function(a0) {
  const { stickerPack, style, onPress } = a0;
  let withBanner = a0.withBanner;
  if (withBanner === void 0) {
    withBanner = false;
  }
  let withDescription = a0.withDescription;
  if (withDescription === void 0) {
    withDescription = false;
  }
  const styles = useStyles();
  const r72 = [<View style={styles.header}>
    <View style={styles.headline}>
      <Text style={styles.label} lineClamp={1} variant="text-md/bold" color="mobile-text-heading-primary">{stickerPack.name}</Text>
      {isStickerPackAnimated(stickerPack) && <View style={styles.iconContainer}>
        <Icon source={Module9630} style={styles.animatedIcon} size={Icon.Sizes.EXTRA_SMALL} color={styles.icon.color} />
      </View>}
      <View style={styles.iconContainer}>
        <Icon source={Module9631} style={styles.premiumIcon} size={Icon.Sizes.EXTRA_SMALL} color={styles.icon.color} />
      </View>
    </View>
  </View>, , ,];
  if (withDescription) {
    withDescription = stickerPack.description != null;
  }
  if (withDescription) {
    withDescription = <Text variant="text-sm/medium">{stickerPack.description}</Text>;
  }
  r72[1] = withDescription;
  r72[2] = <Text lineClamp={1} variant="text-xs/medium" color="text-default">
    {intl.format(t["0S3JpO"], {
      numStickers: stickerPack.stickers.length
    })}
  </Text>;
  const r97 = <>{r72}</>;
  if (withBanner) {
    withBanner = <StickerPackBanner stickerPack={stickerPack} containerStyle={styles.bannerContainer} style={styles.banner} />;
  }
  return <>
    {withBanner}
    {onPress != null ? <PressableOpacity style={[styles.section, style]} onPress={onPress} accessibilityRole="header">{r97}</PressableOpacity> : <View style={[styles.section, style]}>{r97}</View>}
  </>;
});
export default r64;