import React from 'react';
import PropTypes from 'prop-types';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import { getBonusData } from '~helpers/getters.mjs';
import CtaButton from '../../../atoms/button/operator-cta';
import PrettyLink from '~atoms/pretty-link';
import styles from './bonus-box.module.scss';

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

  return (
    <div className={styles.bonusBox}>
      <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>

      <CtaButton
        operator={item}
        icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
        buttonType={buttonType}
        module={module}
      />
    </div>
  );
}

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