import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import styles from './template-two.module.scss';
import { imagePrettyUrl } from '~helpers/getters';
import { getAltText } from '~helpers/image';
import Tnc from '~molecules/tnc';
import LazyImage from '~hooks/lazy-image';
import OperatorBanner from '~atoms/header-operator-bannner';
import Rating from '~atoms/ratings';
import useTranslate from '~hooks/useTranslate/useTranslate';
import { TrackingKeys } from '~constants/tracking-api'

const VerifyIcon = lazy(() => import('~images/icons/verify'));


const TemplateTwo = ({ page, image = <Suspense fallback={<></>}><VerifyIcon /></Suspense>, width = 259, height = 259, moduleName = TrackingKeys?.HEADERSLOTS }) => {
  const imageObject = page.relation?.logo;
  // eslint-disable-next-line react/prop-types
  const headerBonus = page?.sections?.header?.modules?.find((bonus) => bonus?.name === 'bonus');
  return (
    <div className={styles.container}>
      <div className={styles.topSection}>
        <LazyImage
          alt={getAltText(imageObject?.alt, page?.relation?.name)}
          src={imagePrettyUrl(imageObject?.filename, width, height)}
          width={width}
          height={height}
          loading="eager"
        />
        <div className={styles.topContent}>
          <div className={styles.name}>
            <h1>{page?.title}</h1>
            {image}
          </div>
          <Rating item={page.relation} type="game" />
          <span
            className={styles?.ratingGuideline || ''}
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{
              __html: useTranslate(
                'rating_guideline',
                `This unbiased rating score is given by our casino & gambling experts according to our 
                <a href="/rating-guide" class="link-class">Rating Guidelines</a> to provide honest reviews`
              ),
            }}
           />
        </div>
      </div>
      {headerBonus && (
        <>
          <OperatorBanner
            logo={headerBonus?.value?.logo}
            operator={headerBonus?.value}
            template={page?.template}
            moduleName={moduleName}
             clickedElement="header_operator_banner"
          />
          <Tnc operator={headerBonus?.value} isFixed />
        </>
      )}
    </div>
  );
};

export default TemplateTwo;

TemplateTwo.propTypes = {
  page: PropTypes.shape({
    title: PropTypes.string,
  }),
};

TemplateTwo.propTypes = {
  page: PropTypes.shape({
    featured_image_object: PropTypes.string,
    banner: PropTypes.string,
    title: PropTypes.string,
    template: PropTypes.string,
    relation: PropTypes.shape({
      name: PropTypes.string,
      volatility: PropTypes.number,
      average_rating: PropTypes.number,
      logo: PropTypes.shape({}),
      slot: PropTypes.shape({
        name: PropTypes.string,
        game_provider: PropTypes.string,
      }),
      markets: PropTypes.shape({
        ie_en: PropTypes.shape({
          first_rating: PropTypes.number,
        }),
      }),
      affiliate_games: PropTypes.shape({
        ie_en: PropTypes.shape({
          status: PropTypes.string,
        }),
      }),
    }),
  }),
  image: PropTypes.element,
  width: PropTypes.number,
  height: PropTypes.number,
  moduleName: PropTypes.string,
};
