import React from 'react';
import PropTypes from 'prop-types';
import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import Rating from '../../../../../atoms/ratings';
import OperatorBanner from '../../../../../atoms/header-operator-bannner';
import styles from './template-four.module.scss';

const TemplateFour = ({
  relation,
  type,
  image,
  name,
  sections = {},
  pageTemplate,
  icon,
  numOfStars = 5,
}) => {
  const headerBonus = sections?.header?.modules?.find((bonus) => bonus?.name === 'bonus');

  return (
    <div className={styles.container}>
      <div className={styles.topSection}>
        <LazyImage
          loading="eager"
          src={imagePrettyUrl(image?.filename, 300, 300)}
          width={300}
          height={300}
          alt={getAltText(image, relation?.name)}
        />
      </div>
      <div className={styles.bottomSection}>
        <div className={styles.name}>
          <h1>{name}</h1>
          <LazyImage
            src={icon || '../../../../../../images/verify.svg'}
            loading="eager"
            alt="Verified"
            width={24}
            height={24}
          />
        </div>
        <div className={styles.ratings}>
          <Rating item={relation} type={type} numOfStars={numOfStars} />
        </div>
        {headerBonus && (
          <OperatorBanner
            logo={
              headerBonus?.value?.standardised_logo_url_object ||
              headerBonus?.value?.logo_url_object
            }
            operator={headerBonus?.value}
            template={pageTemplate}
          />
        )}
      </div>
    </div>
  );
};

TemplateFour.propTypes = {
  relation: PropTypes.shape({
    type: PropTypes.string,
    template: PropTypes.string,
    name: PropTypes.string,
    rating: PropTypes.string,
    status: PropTypes.string,
  }),
  sections: PropTypes.shape({}),
  name: PropTypes.string,
  type: PropTypes.string,
  image: PropTypes.shape({
    filename: PropTypes.string,
  }),
  pageTemplate: PropTypes.string,
  numOfStars: PropTypes.number,
  icon: PropTypes.node,
};

export default TemplateFour;
