import React from 'react'
import styled from 'styled-components'
import { Flex as GridFlex, Box as GridBox } from '@rebass/grid'
import {height, flex, minHeight} from 'styled-system'

export const Flex = styled(GridFlex)`
  ${height}
  ${minHeight}
  ${flex}
  ${props => props.fill && `flex: 1;`}
`

export const Div = (props) => <GridBox {...props} />
export const Column = (props) => <Flex flexDirection="column"  {...props} />

export const Row = (props) => <Flex flexWrap="wrap" mx={-15} {...props} />
export const Cell = (props) => <GridBox px={15} {...props} />

export const Box = styled(Div)`
  background-color: ${props => props.color ? props.theme.colors[props.color] : props.theme.colors.white};
  border-radius: 2px;
  ${props => props.theme.shadow}
`
export const FlexWithBottomBorder = styled(Flex)`
  border-bottom: 1px solid ${props => props.theme.colors.veryLightGrey};
`

export const FlexWithVerticalBorders = styled(Flex)`
  border-right: 1px solid ${props => props.theme.colors.veryLightGrey};
  border-left: 1px solid ${props => props.theme.colors.veryLightGrey};
`

export const ErrorFlex = styled(Flex)`
    background-color: #FFBABA;
    border-radius: 2px;
    ${props => props.theme.shadow}
`