import React from 'react';
import PropTypes from 'prop-types';
import { getBonusData } from '~helpers/getters.mjs';
import styles from './bonus-box.module.scss';

export default function BonusBox({ item, tracker, splitBy = '+', feSeparator = '+' }) {
  const data = getBonusData(item, tracker, splitBy);

  return (
    <>
      {data?.mainLine && <span className={styles.firstPart}>{data.mainLine}</span>}
      {data?.secondLine && (
        <span className={styles.secondPart}>{`${feSeparator}${data.secondLine}`}</span>
      )}
    </>
  );
}

BonusBox.propTypes = {
  item: PropTypes.shape({}),
  tracker: PropTypes.string,
  pageTemplate: PropTypes.string,
  splitBy: PropTypes.string,
  feSeparator: PropTypes.string,
};
