// @flow
import { Box } from 'frack-components'
import * as React from 'react'
import { Column, Row } from '@siteone/atoms'

type Props = {
  children: React.Node,
  imageComponent: any,
}

const computedWidth = { left: '34em', maxWidth: 1063 }

const OverlapImage = ({ children, imageComponent: ImageComponent }: Props) => (
  <Box position="relative">
    <Box position="absolute" display="flex" alignItems="center" width="100%" top={0} bottom={0} style={computedWidth}>
      <ImageComponent />
    </Box>
    <Row justifyContent="between" negativeMargin={0}>
      <Column padding={0} typography="measure">
        {children}
      </Column>
    </Row>
  </Box>
)

OverlapImage.defaultProps = {}

export default OverlapImage