import React from "react";
import './contentBlock.scss'


export const ContentBlock = ({props: {title, content}}) => {

  const evenFn = (number) => !!number % 2 === 0;

  return (
      <div className='contentBlock'>
        <h2 className='contentBlock__title'>
          {title}
        </h2>
        {Array.isArray(content) && content.map((el, index) =>
            <div className={`contentBlock__wrapper ${!evenFn(index) ? 'contentBlock__wrapper--even' : ''}`}
                 key={`${title}-${index}`}>
              <div className='contentBlock__imageWrapper'>
                <img className='contentBlock__image' src={el.img} alt="Content"/>
              </div>
              <div className='contentBlock__content'>
                <h3 className='contentBlock__subtitle'>{el.subTitle}</h3>
                <p className='contentBlock__text'>{el.text}</p>
              </div>
            </div>
        )}

      </div>

  )
};