content: import React from 'react'
  import { getImage, GatsbyImage } from 'gatsby-plugin-image'
  import tw, { css, theme } from 'twin.macro'
  
  export const EarningInsight = props => {
  
    const mvp = (
      <GatsbyImage
        alt="Earning Insight · MVP"
        image={getImage(props.assets[4])}
      />
    )
  
    return (
      <div
        className="fare-alert-exploration"
        css={{
          backgroundColor: `${theme`borderColor.accent`}`,
          paddingTop: '2rem',
        }}
        tw="flex flex-col gap-y-4"
      >
        <picture
          tw="shadow-sm"
          css={{
            width: 320,
            maxWidth: 'min(320px, calc(100% - 32px))',
            margin: '0 auto',
          }}
        >
          <source
            srcSet={mvp.props.image.images.sources[0].srcSet}
            media={mvp.props.image.images.sources[0].sizes}
            type={mvp.props.image.images.sources[0].type}
          />
          <img
            css={{
              margin: '0 !important',
            }}
            src={mvp.props.image.images.fallback.src}
            sizes={mvp.props.image.images.fallback.sizes}
            srcSet={mvp.props.image.images.fallback.srcSet}
            alt="Earning Insight"
          />
        </picture>
        <div
          tw="font-sans"
          css={{
            overflow: 'hidden',
            textAlign: 'center',
            width: '100% !important',
            fontWeight: 400,
            color: 'var(--text-primary) !important',
            fontSize: '0.75rem !important',
            padding: '0.5rem !important',
            margin: '0 !important',
          }}
        >
          The design iteration that we go with for MVP
        </div>
      </div>
    )
  }
  
  export default EarningInsight
  