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

export default function TemplateOne({ module }) {
  const { items } = module;
  return (
    <div className={styles?.spotlightsIcon || ''}>
      {
        // eslint-disable-next-line react/prop-types
        items?.map((res) => (
          <Link to={res?.link?.value} external={res?.link?.type === 'external'}>
            {res?.icon && (
              <LazyImage
                height={106}
                width={106}
                src={imagePrettyUrl(res?.icon)}
                alt={res?.link_text}
              />
            )}
            {res?.link_text && <p>{res?.link_text}</p>}
            {res.subtitle && <span>{res.subtitle}</span>}
          </Link>
        ))
      }
    </div>
  );
}

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