import React from 'react';
import { Flex } from 'grid-styled';
import { childrenInsertProps } from '../utils/Utils';

const BoxBase = Flex.extend`
    width: 80%;
    background-color: ${props => props.theme.boxBackgroundColor}
`;

class Box extends React.Component{
    render(){
        return(
            <BoxBase {...this.props} theme={this.props.theme}>
                {childrenInsertProps(this.props.children, {theme: this.props.theme})}
            </BoxBase>
        );
    }
}

export default Box;
