import React from 'react';
import PropTypes from 'prop-types';
import styles from './template-three.module.scss';
import Item from './item';

export default function TemplateOne({
  module,
  readMore = true,
  scrollableContent = false,
  characterMaxReadMore = 600,
  buttonType = 'secondary',
  buttonSize = 'm',
}) {
  const { items } = module;
  return (
    <div className={styles?.spotlightsImage || ''}>
      {
        // eslint-disable-next-line react/prop-types
        items?.map((res) => {
          // if text is shorter no need to show the button
          const readMoreCheck = res?.text?.length > characterMaxReadMore;
          return (
            <Item
              item={res}
              readMore={readMoreCheck ? readMore : false}
              scrollableContent={scrollableContent}
              buttonType={buttonType}
              buttonSize={buttonSize}
            />
          );
        })
      }
    </div>
  );
}

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