import React from 'react';

import Container from '../../../shared/Container';
import { CaseWrapper, CaseBlock, AmountBlock } from '../../../../styles/components/main/product/cyber/Case.style';

interface Props {
  title: string;
  description: JSX.Element;
  image: { url: string };
  text: JSX.Element;
  items: {
    amount: string;
    text: string;
  }[];
}

const Case: React.FC<Props> = ({ title, description, image, text, items }) => (
  <Container>
    <h2>{title}</h2>
    <p className="mb text-center">{description}</p>
    <CaseWrapper>
      <CaseBlock>
        <img src={image.url} alt="" />
        <div>{text}</div>
      </CaseBlock>
      <AmountBlock>
        <h3>Remboursé par Easyblue</h3>
        {items.map(({ amount, text }, index) =>
          <div key={`item-case-${index}`}>
            <strong><i className="fas fa-check"/> {amount} €</strong>
            <p>{text}</p>
          </div>
        )}
      </AmountBlock>
    </CaseWrapper>
  </Container>
);

export default Case;