import React from 'react';

import Container from '../shared/Container';
import { WhyBlock } from '../../styles/components/main/Why.style';
import RichText from '../RichText';
import { WhyPerk } from '../../typings/entities';

interface Props {
  title: string;
  items: WhyPerk[];
}

const Why: React.FC<Props> = ({ title, items }) => (
  <Container>
    <h2 className="mb">{title}</h2>
    <>
      {items.map((item, index) =>
        <WhyBlock key={`why-${index}`}>
          <div>
            <RichText content={item.perk_title} Component={'h3'} removeParagraphs />
            <RichText content={item.perk_description} />
          </div>
          <div>
            <img src={item.perk_image.url} alt={item.perk_image.alt} />
          </div>
        </WhyBlock>)}
    </>
  </Container>
);

export default Why;