content: import React from 'react'
  import Stories from 'react-insta-stories'
  import { getImage, GatsbyImage } from 'gatsby-plugin-image'
  import tw, { css, theme } from 'twin.macro'
  
  export const EarningInsightStories = props => {
  
    const figure1 = <GatsbyImage alt="Earning Insight exploration A" image={getImage(props.assets[0])} />
    const figure2 = <GatsbyImage alt="Earning Insight exploration B" image={getImage(props.assets[1])} />
    const figure3a = <GatsbyImage alt="Earning Insight exploration C1" image={getImage(props.assets[2])} />
    const figure3b = <GatsbyImage alt="Earning Insight exploration C2" image={getImage(props.assets[3])} />
  
    const stories = [
      {
        content: props => (
          <div
            style={{
              background: 'var(--color-border)',
              height: '100%',
              width: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              paddingTop: '2rem',
              paddingBottom: '2rem',
            }}
          >
            <figure css={{ width: '100%' }}>
              <img
                css={{
                  width: 320,
                  maxWidth: 'min(320px, calc(100% - 32px))',
                  margin: '0 auto',
                }}
                srcSet={figure1.props.image.images.sources[0].srcSet}
                src={figure1.props.image.images.fallback.src}
                alt={figure1.props.alt}
              />
              <figcaption
                tw="font-sans"
                css={{
                  overflow: 'hidden',
                  left: 0,
                  bottom: 0,
                  textAlign: 'center',
                  width: '100% !important',
                  fontWeight: 400,
                  color: 'var(--text-primary) !important',
                  fontSize: '0.75rem !important',
                  padding: '0.5rem !important',
                  margin: '0 !important',
                  marginTop: '2rem !important',
                  position: 'absolute !important',
                }}
              >
                Exploration A: Overlap driver‘s earning with average earnings for other drivers by default
              </figcaption>
            </figure>
          </div>
        ),
      },
      {
        content: props => (
          <div
            style={{
              background: 'var(--color-border)',
              height: '100%',
              width: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <figure
              css={{
                width: '100%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 16,
              }}
            >
              <img
                css={{
                  width: 320,
                  maxWidth: 'min(320px, calc(100% - 32px))',
                  margin: '0 auto',
                }}
                srcSet={figure2.props.image.images.sources[0].srcSet}
                src={figure2.props.image.images.fallback.src}
                alt={figure2.props.alt}
              />
              <figcaption
                tw="font-sans"
                css={{
                  overflow: 'hidden',
                  left: 0,
                  bottom: 0,
                  textAlign: 'center',
                  width: '100% !important',
                  fontWeight: 400,
                  color: 'var(--text-primary) !important',
                  fontSize: '0.75rem !important',
                  padding: '0.5rem !important',
                  margin: '0 !important',
                  marginTop: '2rem !important',
                  position: 'absolute !important',
                }}
              >
                Exploration B: A toggle to show a range of weekly average earnings for all drivers
              </figcaption>
            </figure>
          </div>
        ),
      },
      {
        content: props => (
          <div
            style={{
              background: 'var(--color-border)',
              height: '100%',
              width: '100%',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <figure
              css={{
                width: '100%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 16,
              }}
            >
              <img
                css={{
                  width: 320,
                  maxWidth: 'min(320px, calc(50% - 32px))',
                }}
                srcSet={figure3a.props.image.images.sources[0].srcSet}
                src={figure3a.props.image.images.fallback.src}
                alt={figure3a.props.alt}
              />
              <img
                css={{
                  width: 320,
                  maxWidth: 'min(320px, calc(50% - 32px))',
                }}
                srcSet={figure3b.props.image.images.sources[0].srcSet}
                src={figure3b.props.image.images.fallback.src}
                alt={figure3b.props.alt}
              />
              <figcaption
                tw="font-sans"
                css={{
                  overflow: 'hidden',
                  left: 0,
                  bottom: 0,
                  textAlign: 'center',
                  width: '100% !important',
                  fontWeight: 400,
                  color: 'var(--text-primary) !important',
                  fontSize: '0.75rem !important',
                  padding: '0.5rem !important',
                  margin: '0 !important',
                  marginTop: '2rem !important',
                  position: 'absolute !important',
                }}
              >
                Exploration C: Show average earnings of other drivers on a separate tab
              </figcaption>
            </figure>
          </div>
        ),
      },
    ]
  
    return (
      <div
        className="fare-alert-exploration"
        tw="border-t border-b md:border my-4"
        css={{ borderColor: `${theme`borderColor.accent`}`, zIndex: 1, position: 'relative' }}
      >
        <Stories stories={stories} height={640} width="100%" defaultInterval={10240} loop={true} />
      </div>
    )
  }
  
  export default EarningInsightStories
  