import React from 'react';
import PropTypes from 'prop-types';

import { FaStar } from '@react-icons/all-files/fa/FaStar';
import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
import OperatorBanner from '../../../../../atoms/header-operator-bannner';
import styles from './slot.module.scss';

import Rating from '../../../../../atoms/ratings';

export default function SlotHeader({ page, image }) {
  const imageObject =
    page.relation?.standardised_logo_filename_object || page.relation?.thumbnail_filename_object;

  const averageRating = page.relation?.average_rating;
  // eslint-disable-next-line react/prop-types
  const headerBonus = page?.sections?.header?.modules?.find((bonus) => bonus?.name === 'bonus');
  return (
    <div className={styles.parentContainer}>
      <div className={styles.slotHeader}>
        <div className={styles.data}>
          <img
            alt={getAltText(imageObject.alt, page?.relation?.name)}
            src={imagePrettyUrl(imageObject.filename, 170, 170)}
            width={170}
            height={170}
            loading="eager"
          />

          <div>
            <div className={styles.operatorName}>
              <h1>{page?.title}</h1>
              <img
                alt="icon"
                src={image || '../../../../../../images/verify.svg'}
                width={24}
                height={24}
                loading="eager"
              />
            </div>
            <div className={styles.averageRating}>
              <FaStar title="Star Icon" s />
              <p>{averageRating}/5</p>
            </div>
          </div>
        </div>
        <Rating item={page.relation} type="game" />
        {headerBonus && (
          <OperatorBanner
            logo={
              headerBonus?.value?.standardised_logo_url_object ||
              headerBonus?.value?.logo_url_object
            }
            operator={headerBonus?.value}
            template={page?.template}
          />
        )}
      </div>
    </div>
  );
}

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

SlotHeader.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.string,
      thumbnail_filename_object: PropTypes.string,
      standardised_logo_filename_object: PropTypes.string,
      slot: PropTypes.shape({
        name: PropTypes.string,
        game_provider: PropTypes.string,
      }),
      markets: PropTypes.shape({
        ie_en: PropTypes.shape({
          first_rating: PropTypes.string,
        }),
      }),
      affiliate_games: PropTypes.shape({
        ie_en: PropTypes.shape({
          status: PropTypes.string,
        }),
      }),
    }),
  }),
  image: PropTypes.string,
};
