import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import styles from './variable.module.scss';
import { translate } from '~helpers/getters.mjs';
import { Context } from '~context/MainProvider';

const VariableComponent = ({ item }) => {
  const { translations } = useContext(Context) || {};

  const bonusInfo = translate(translations, 'bonus_info', null);
  const gratisSpins = translate(translations, 'gratis_spins', null);
  return (
    <>
      {bonusInfo && <p className={styles.bonusInfo}>{bonusInfo}</p>}
      {gratisSpins && (
        <p className={styles.gratisSpins}>
          {gratisSpins}:{item?.bonus?.one_liners?.main?.freespins}
        </p>
      )}
    </>
  );
};

VariableComponent.propTypes = {
  item: PropTypes.shape({
    bonus: PropTypes.shape({
      one_liners: PropTypes.shape({
        main: PropTypes.shape({
          freespins: PropTypes.string,
        }),
      }),
    }),
  }),
};

export default VariableComponent;
