// Metro module 12515 (f12516).
import { View } from "react-native";
import { Gradients } from "../../../colors/native/ColorConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import usePremiumGroupFeaturesTableCardText from "../hooks/usePremiumGroupFeaturesTableCardText";
import { GradientBorder } from "../../../../design/void/native";
import Module4611 from "../../../../_bundle/Module4611";
import { hexWithOpacity } from "../../../../utils/ColorUtils";
import PremiumGroupWordmark from "./PremiumGroupWordmark";
let useStyles;
const BetaPill = function BetaPill() {
  const styles = useStyles();
  return <View style={styles.betaPill}>
    <Text variant="text-xs/bold" style={styles.betaText}>
      {intl.string(t.oW0eUd)}
    </Text>
  </View>;
};
useStyles = createStyles({
  premiumGroupCard: {
    padding: 16,
    borderRadius: Module712.radii.sm - 2,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    display: "flex",
    alignItems: "flex-start"
  },
  headerContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    marginBottom: 4
  },
  betaPill: {
    backgroundColor: Module712.colors.WHITE,
    borderRadius: Module712.radii.round,
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 8,
    paddingBottom: 2
  },
  betaText: {
    color: Module712.colors.BLACK,
    textAlign: "center",
    textTransform: "uppercase"
  },
  title: {
    color: Module712.colors.TEXT_DEFAULT,
    marginBottom: 16
  },
  description: {
    color: Module712.colors.TEXT_DEFAULT
  }
});
export default function PremiumGroupFeaturesTableCard(props) {
  const { style, premiumGroupRole } = props;
  const styles = useStyles();
  const premiumGroupFeaturesTableCardText = usePremiumGroupFeaturesTableCardText(premiumGroupRole, false);
  if (premiumGroupFeaturesTableCardText == null) {
    return null;
  }
  const { subheaderString, bodyString } = premiumGroupFeaturesTableCardText;
  return <GradientBorder borderWidth={2} direction={GradientBorder.Direction.HORIZONTAL} colors={Gradients.PREMIUM_TIER_2} borderRadius={Module712.radii.sm} style={style}>
    <Module4611 start={{
      x: 0,
      y: 0
    }} end={{
      x: 1,
      y: 0
    }} colors={[hexWithOpacity("#8547C6", 0.15), hexWithOpacity("#B845C1", 0.15), hexWithOpacity("#AB5D8A", 0.15)]} locations={[0, 0.4996, 0.9593]} style={styles.premiumGroupCard}>
      <View style={styles.headerContainer}>
        <PremiumGroupWordmark width={181} height={16} />
        <BetaPill />
      </View>
      <Text variant="text-sm/normal" style={styles.title}>{subheaderString}</Text>
      <Text variant="text-sm/normal" style={styles.description}>{bodyString}</Text>
    </Module4611>
  </GradientBorder>;
};
export { BetaPill };