import React from 'react';
import PropTypes from 'prop-types';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
import LazyImage from '~hooks/lazy-image';
import Button from '~atoms/button/button';
import {
  imagePrettyUrl,
  getBonus,
  getExtraField,
} from '~helpers/getters';
import { getAltText } from '~helpers/image';
import Tnc from '~molecules/tnc';
import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './template-two.module.scss';

export default function TemplateTwo({ extraFields, imageObj }) {
  const operator = getExtraField(extraFields, 'operator');
  const oneLiner = getBonus('main', operator);
  const link = getExtraField(extraFields, 'link');

  return (
    <div className={`${styles.templateTwo} ${!imageObj && styles.blendColors}`}>
      <div className={styles.headerContainer}>
        <span className={styles.bonusText}>
          {`${useTranslate('welcome_bonus', 'Welcome bonus')}`}
        </span>
        {oneLiner && <h1>{oneLiner.one_liner.replace('+', '&')}</h1>}
        {link && (
          <Button
            to={link}
            buttonType="secondary"
            gtmClass="default-header-template-two-gtm btn-cta"
            btnText={useTranslate('online_casino', link)}
            icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
          />
        )}
        <Tnc operator={operator} />
      </div>
      {imageObj && (
        <div className={styles.imgContainer}>
          <LazyImage
            src={imagePrettyUrl(imageObj.filename, imageObj.width, imageObj.height)}
            alt={getAltText(imageObj, imageObj.title)}
            width={parseInt(imageObj.width)}
            height={parseInt(imageObj.height)}
            loading="eager"
          />
        </div>
      )}
    </div>
  );
}

TemplateTwo.propTypes = {
  imageObj: PropTypes.shape({
    alt: PropTypes.string,
    width: PropTypes.string,
    height: PropTypes.string,
    filename: PropTypes.string,
    title: PropTypes.string,
  }),
  extraFields: PropTypes.shape({
    link: PropTypes.string,
    operator: PropTypes.shape({
      extra_fields: PropTypes.shape({
      }),
    }),
  }),
};
