import React from 'react';

import Container from '../../../shared/Container';
import { HowBlock, HowWrapper } from '../../../../styles/components/main/product/cyber/How.style';
import { PrismicElement, PrismicImage, PrismicLink as PrismicLinkInterface } from '../../../../typings/prismic';
import { ButtonContainer } from '../../../../styles/components/shared/Button.style';
import PrismicLink from '../../../PrismicLink';
import RichText from '../../../RichText';

interface Props {
  title: string;
  items: {
    image: PrismicImage;
    text: PrismicElement;
  }[];
  CATFindLink: PrismicLinkInterface;
  CTAFindLabel: string;
}

const How: React.FC<Props> = ({ title, items, CATFindLink, CTAFindLabel }) => (
  <Container>
    <h2 className="mb">{title}</h2>
    <HowWrapper>
      {items.map(({ image, text }, index) =>
        <HowBlock key={`how-${index}`}>
          <img src={image.url} alt={image.alt} />
          <RichText content={text} />
        </HowBlock>
      )}
    </HowWrapper>

    <ButtonContainer>
      <PrismicLink
        link={CATFindLink}
        linkProps={{
          button: true,
          large: true,
          display: 'inline-block',
          color: 'yellow'
        }}>
        {CTAFindLabel}
      </PrismicLink>
    </ButtonContainer>
  </Container>
);

export default How;