import React from 'react';

import Container from '../../../shared/Container';
import { TextBlocksWrapper } from '../../../../styles/components/main/product/cyber/TextBlocks.style';

interface Props {
  items: {
    title: string;
    text: JSX.Element;
  }[];
}

const TextBlocks: React.FC<Props> = ({ items }) => (
  <Container>
    <TextBlocksWrapper>
      {items.map(({ title, text }, index) =>
        <div key={`how-${index}`}>
          <h3>{title}</h3>
          <div>
            {text}
          </div>
        </div>
      )}
    </TextBlocksWrapper>
  </Container>
);

export default TextBlocks;