import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NovaCompositionCoorpacademyCheck as RightIcon, NovaSolidStatusClose as WrongIcon } from '@coorpacademy/nova-icons';
import { COLORS } from '../../variables/colors';
const createStyle = (icon, current) => {
  let backgroundColor;
  switch (icon) {
    case 'right':
      backgroundColor = COLORS.cm_positive_500;
      break;
    case 'wrong':
      backgroundColor = COLORS.negative;
      break;
    case 'no-answer':
    default:
      backgroundColor = COLORS.cm_grey_100;
  }
  return StyleSheet.create({
    step: {
      width: current ? 40 : 32,
      height: current ? 40 : 32,
      opacity: current ? 1 : 0.5,
      marginHorizontal: 8,
      backgroundColor,
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 50
    },
    stepText: {
      fontWeight: '600',
      fontSize: current ? 16 : 12
    },
    icon: {
      width: current ? 14 : 12,
      height: current ? 14 : 12
    }
  });
};
const Step = ({
  value,
  icon,
  current
}) => {
  const [style, setStyle] = useState(null);
  useEffect(() => {
    const _style = createStyle(icon, current);
    setStyle(_style);
  }, [current, icon]);
  if (!style) {
    return null;
  }
  let child;
  switch (icon) {
    case 'right':
      child = /*#__PURE__*/React.createElement(RightIcon, {
        style: style.icon,
        color: "#fff"
      });
      break;
    case 'wrong':
      child = /*#__PURE__*/React.createElement(WrongIcon, {
        style: style.icon,
        color: "#fff"
      });
      break;
    case 'no-answer':
    default:
      child = /*#__PURE__*/React.createElement(Text, {
        style: style.stepText
      }, value);
  }
  return /*#__PURE__*/React.createElement(View, {
    style: style.step
  }, child);
};
export default Step;
//# sourceMappingURL=index.native.js.map