import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import LazyImage from '../../../../../hooks/lazy-image';
import { Context } from '../../../../../context/MainProvider';
import Link from '../../../../../hooks/link';
import { imagePrettyUrl, translate } from '../../../../../helpers/getters.mjs';
import styles from './template-one.module.scss';

export default function TemplateOne({ module }) {
  const { items } = module;
  const { translations } = useContext(Context) || {};

  const content = (res) => (
    <>
      {res?.image && (
        <LazyImage width={295} height={260} src={imagePrettyUrl(res?.image)} alt={res?.link_text} />
      )}
      {/* Need to talk to add this field on hercules */}
      <p>
        {res?.link_text || translate(translations, 'link_text_spotlights', 'Top Online Casinos')}
      </p>
      {res.subtitle && <span>{res.subtitle}</span>}
    </>
  );

  return (
    <div className={styles?.spotlightsImage || ''}>
      {items?.map((res) => {
        if (res.link?.value) {
          return (
            <Link to={res?.link?.value} external={res?.link?.type === 'external'}>
              {content(res)}
            </Link>
          );
        }
        return <div>{content(res)}</div>;
      })}
    </div>
  );
}

TemplateOne.propTypes = {
  module: PropTypes.shape({
    items: PropTypes.shape({}),
  }).isRequired,
};
