// Metro module 12493 (f12494).
import { TouchableOpacity, View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import ToastActionCreators from "../../../toast/native/ToastActionCreators";
import { intl, t } from "../../../../intl/index.native";
import { CircleInformationIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleInformationIcon";
import { Text } from "../../../../design/components/Text/native/Text";
const useStyles = createStyles({
  largeCountdownPill: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: Module712.radii.round,
    backgroundColor: "rgba(255, 255, 255, 0.1)",
    alignSelf: "center",
    paddingHorizontal: 16,
    marginBottom: 10
  },
  largeCountdownPillText: {
    paddingVertical: 8,
    color: Module712.colors.TEXT_STATUS_IDLE,
    fontSize: 14,
    lineHeight: 16,
    marginRight: 8
  },
  iconStyle: {
    width: 16,
    height: 16
  }
});
export default function LargeCountDownPill(props) {
  const countdownText = props.countdownText;
  const styles = useStyles();
  return <TouchableOpacity onPress={function onPress() {
    ToastActionCreators.open({
      key: "LARGE_COUNTDOWN_PILL_TOAST",
      content: intl.string(t["Mv4E/M"]),
      icon: () => <CircleInformationIcon style={styles.iconStyle} color={Module712.colors.STATUS_WARNING} />,
      iconColor: Module712.colors.STATUS_WARNING
    });
  }}>
    <View style={styles.largeCountdownPill}>
      <Text variant="text-xs/bold" style={styles.largeCountdownPillText}>
        {countdownText.toUpperCase()}
      </Text>
      <CircleInformationIcon style={styles.iconStyle} color={Module712.colors.TEXT_STATUS_IDLE} />
    </View>
  </TouchableOpacity>;
};