/* @flow */

import * as React from 'react'
import { Column, Row } from '@siteone/atoms'

type Props = {
  reverse?: boolean,
  children: [React.Element<any>, React.Element<any>],
}

const columnLayout = {
  oneThird: {
    s: '100%',
    m: '50%',
    l: 'third',
  },
  twoThirds: {
    s: '100%',
    m: '50%',
    l: 'two-thirds',
  },
}

const TwoToOneGrid = ({ reverse, children, ...rest }: Props) => (
  <Row flexDirection={reverse ? 'row-reverse' : undefined} {...rest}>
    <Column width={columnLayout.twoThirds}>{children[0]}</Column>
    <Column width={columnLayout.oneThird}>{children[1]}</Column>
  </Row>
)

TwoToOneGrid.defaultProps = {
  reverse: false,
}

export default TwoToOneGrid