import React from 'react';

import Container from '../shared/Container';
import { HowBlock } from '../../styles/components/main/How.style';
import { PrismicElement, PrismicImage } from '../../typings/prismic';
import RichText from '../RichText';

interface Props {
  title: string;
  steps: { step_image: PrismicImage; step_title: string; step_description: PrismicElement }[];
}

const How: React.FC<Props> = ({ title, steps }) => (
  <Container>
    <h2 className="mb">{title}</h2>
    <div className="text-center">
      {steps.map((step, index) =>
        <HowBlock key={`how-${index}`}>
          <div>
            <img src={step.step_image.url} alt={step.step_image.alt} />
          </div>
          <span>{index + 1}</span>
          <h4>{step.step_title}</h4>
          <RichText content={step.step_description} />
        </HowBlock>
      )}
    </div>
  </Container>
);

export default How;