text: import React from 'react'
  import PropTypes from 'prop-types'
  import Styled from 'styled-components'
  import Img from 'gatsby-image'
  import { Heading3, Heading4, Label } from '../styles/text'
  
  const ReportContainer = Styled.div`
    margin: auto;
    text-align: center;
    max-width: 480px;
    margin-bottom:40px;
  
    @media (min-width: 768px) {
      margin-bottom: 0px;
    }
  
    & h3 {
      margin-bottom: 12px;
    }
  
    & .report__image-container {
      margin-top: 30px
      display: flex;
      flex-direction: column;
  
      @media (min-width: 768px) {
        flex-direction: row;
        justify-content: space-around;
      }
  
      & h4 {
        margin-bottom: 30px;
      }
    }
  
    & .report__body {
      padding: 0px;
  
      @media (min-width: 768px) {
        padding: 0px 40px;
      }
    }
  
    & .report__label {
      margin-top: 69px;
      padding: 0px;
  
      @media (min-width: 768px) {
        padding: 0px 40px;
      }
    }
  `
  
  function Report({ title, body, before_image, after_image, label }) {
  	return (
  		<ReportContainer className="report">
  			<Heading3>{title}</Heading3>
  			<Label className="report__body">{body}</Label>
  			<div className="report__image-container">
  				<div>
  					<Heading4>Before</Heading4>
  					{before_image.publicURL && (
  						<img alt="chart" src={before_image.publicURL} />
  					)}
  					{/* TODO: Replace svg image assets */}
  					{before_image.childImageSharp && (
  						<Img alt="chart" fixed={before_image.childImageSharp.fixed} />
  					)}
  				</div>
  				<div>
  					<Heading4>After</Heading4>
  					{after_image.publicURL && (
  						<img alt="chart" src={after_image.publicURL} />
  					)}
  					{after_image.childImageSharp && (
  						<Img alt="chart" fixed={after_image.childImageSharp.fixed} />
  					)}
  				</div>
  			</div>
  			<Label className="report__label">{label}</Label>
  		</ReportContainer>
  	)
  }
  
  export default Report
  
  Report.propTypes = {
  	title: PropTypes.string.isRequired,
  	body: PropTypes.string.isRequired,
  	before_image: PropTypes.shape({ publicURL: PropTypes.string.isRequired })
  		.isRequired,
  	after_image: PropTypes.shape({ publicURL: PropTypes.string.isRequired })
  		.isRequired,
  	label: PropTypes.string.isRequired
  }
  