import React from 'react';
import { ImageWithTextSectionProps } from './types';
import ImageWithTextCard from './card';
import { isEmpty } from 'lodash';

const ImageWithTextSection: React.FC<ImageWithTextSectionProps> = ({ title, hasBackground, cards }) => {
  const className = `image-with-text ${hasBackground ? 'image-with-text--background' : ''}`;

  return (
    <div className={className}>
      <div className="image-with-text__container">
        <div className="image-with-text__title__row">
          <h2 className="image-with-text__title">{title}</h2>
        </div>

        <div className="image-with-text__card__wrapper">{!isEmpty(cards) && cards.map((card, index) => <ImageWithTextCard key={index} {...card} />)}</div>
      </div>
    </div>
  );
};

export default ImageWithTextSection;