import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import LottieView from 'lottie-react-native';
import { useTemplateContext } from '../../template/app-review/template-context';
import { BOX_STYLE } from '../../variables/shadow';
const createStyleSheet = theme => StyleSheet.create({
  animation: {
    marginBottom: 12,
    width: 132,
    height: 132
  },
  // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread
  card: {
    alignItems: 'center',
    paddingTop: 32,
    paddingBottom: 24,
    borderRadius: 24,
    margin: 10,
    width: 280,
    height: 317,
    ...BOX_STYLE,
    backgroundColor: theme.colors.white
  },
  cardTitle: {
    fontWeight: '400',
    fontSize: 32,
    lineHeight: 40,
    color: theme.colors.text.primary
  },
  reward: {
    alignItems: 'center'
  },
  rewardText: {
    fontWeight: '700',
    fontSize: 64,
    lineHeight: 77,
    marginHorizontal: 10
  },
  iconBig: {
    width: 70,
    height: 70
  },
  iconSmall: {
    width: 53,
    height: 53
  }
});
const CardCongrats = ({
  animationUri,
  Icon,
  value,
  text,
  iconColor,
  textColor,
  direction
}) => {
  const {
    theme
  } = useTemplateContext();
  const [styleSheet, setStylesheet] = useState(null);
  useEffect(() => {
    const _stylesheet = createStyleSheet(theme);
    setStylesheet(_stylesheet);
  }, [theme]);
  if (!styleSheet) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: styleSheet.card
  }, /*#__PURE__*/React.createElement(View, {
    style: styleSheet.animation
  }, animationUri ? /*#__PURE__*/React.createElement(LottieView, {
    source: {
      uri: animationUri
    },
    autoPlay: true,
    loop: false
  }) : null), /*#__PURE__*/React.createElement(Text, {
    style: styleSheet.cardTitle
  }, text), /*#__PURE__*/React.createElement(View, {
    style: [styleSheet.reward, {
      flexDirection: direction
    }]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styleSheet.rewardText, {
      color: textColor
    }]
  }, value), /*#__PURE__*/React.createElement(Icon, {
    style: styleSheet.iconSmall,
    color: iconColor
  })));
};
export default CardCongrats;
//# sourceMappingURL=index.native.js.map