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

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

  return (
    <PrettyLink
      operator={item}
      pageTemplate={pageTemplate}
      module={module}
      tracker={tracker}
      clickedElement="oneliner"
      className={`${styles.detailsBox} ${'bonus-box-gtm'}`}
    >
      {data?.mainLine && <span className={styles.firstPart}>{data.mainLine}</span>}
      {data?.secondLine && (
        <span className={styles.secondPart}>{`${feSeparator}${data.secondLine}`}</span>
      )}
    </PrettyLink>
  );
}

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