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

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

  return (
    <a
      href={prettyLink || '#'}
      target="_blank"
      rel="nofollow noreferrer sponsored"
      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>
      )}
    </a>
  );
}

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