import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
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-two.module.scss';

export default function TemplateOne({ module }) {
  const { items } = module;
  const { translations } = useContext(Context) || {};
  return (
    <div className={styles?.spotlightsImage || ''}>
      {
        // eslint-disable-next-line react/prop-types
        items?.map((res) => (
          <Link to={res?.link?.value} external={res?.link?.type === 'external'}>
            {res?.image && <LazyImage src={imagePrettyUrl(res?.image)} />}
            <p>
              {res?.link_text}{' '}
              {translate(translations, 'link_text_spotlights', 'Top Online Casinos')}{' '}
              <FaArrowRight size={20} color="#fff" />
            </p>
            {res.subtitle && <span>{res.subtitle}</span>}
          </Link>
        ))
      }
    </div>
  );
}

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