// @flow
import React from 'react'
import { Box } from 'frack-components'
import { Row, Column } from '@siteone/atoms'
import styles from './ThirdToFullGrid.scss'

type Props = {
  children: any,
  bgColor?: string,
}

const thirdWidth = {
  s: '100%',
  m: '50%',
  ns: 'third',
}

const position = {
  s: 'relative',
  ns: 'absolute',
}

const style = { minHeight: 460 }

const ThirdToFullGrid = ({ children, bgColor, ...props }: Props) => (
    <Row position="relative" justifyContent="flex-start" alignItems="center" style={style} {...props}>
      <Column display="flex" flexDirection="column" justifyContent="center" width={thirdWidth}>{children[0]}</Column>
      <Box className={styles.box} position={position}>
        {children[1]}
      </Box>
    </Row>
)

ThirdToFullGrid.defaultProps = {
  bgColor: 'light-gray',
}

export default ThirdToFullGrid