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 Button from '../../../../atoms/button/button';
import { imagePrettyUrl, translate } from '../../../../../helpers/getters.mjs';
import { Context } from '../../../../../context/MainProvider';
import styles from './template-two.module.scss';

export default function TemplateOne({
  module,
  scrollableContent = false,
  buttonType = 'secondary',
  buttonSize = 'm',
}) {
  const { items } = module;
  const { translations } = useContext(Context) || {};

  return (
    <div className={styles?.spotlightsImage || ''}>
      {
        // eslint-disable-next-line react/prop-types
        items?.map((res) => {
          const TitleTag = res?.title_tag || 'label';
          return (
            <div className={`${styles.item} ${scrollableContent && styles.scrollContent}`}>
              <div className={styles.topSection}>
                {res?.image && (
                  <LazyImage width={104} height={104} src={imagePrettyUrl(res?.image)} />
                )}
                {res?.label && <TitleTag>{res.label}</TitleTag>}
                {res.subtitle && <span>{res.subtitle}</span>}
                {res?.text && (
                  <div
                    className={`${styles.desc} ${scrollableContent ? styles.scroll : ''}`}
                    dangerouslySetInnerHTML={{ __html: res?.text }}
                  />
                )}
              </div>
              {res?.link?.value && (
                <Button
                  icon={<FaArrowRight />}
                  buttonType={buttonType}
                  buttonSize={buttonSize}
                  isInternalLink={res?.link?.type !== 'external'}
                  targetBlank={res?.link?.type !== 'page'}
                  to={res?.link?.value}
                  btnText={
                    res?.link_text ||
                    translate(translations, 'read_review_spotlight', 'Read review')
                  }
                />
              )}
            </div>
          );
        })
      }
    </div>
  );
}

TemplateOne.propTypes = {
  module: PropTypes.shape({
    items: PropTypes.shape({}),
  }).isRequired,
  scrollableContent: PropTypes.bool,
  buttonType: PropTypes.string,
  buttonSize: PropTypes.string,
};
