import React from 'react';

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

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

const Why: React.FC<Props> = ({ title, items, CATFindLink, CTAFindLabel }) => (
  <Container>
    <h2 className="mb">{title}</h2>
    <WhyWrapper>
      {items.map(({ title, description, image }, index) =>
        <WhyBlock key={`why-${index}`}>
          <div>
            <img src={image.url} alt={image.alt} />
          </div>
          <div>
            <RichText content={title} Component={'h3'} removeParagraphs />
            <RichText content={description} />
          </div>
        </WhyBlock>)}
    </WhyWrapper>
    <ButtonContainer>
      <PrismicLink
        link={CATFindLink}
        linkProps={{
          button: true,
          large: true,
          display: 'inline-block',
          color: 'yellow'
        }}>
        {CTAFindLabel}
      </PrismicLink>
    </ButtonContainer>
  </Container>
);

export default Why;