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

const ContainerBox = Flex.extend`
    max-width: ${props => props.theme.containerMaxWidth};
    width: ${props => props.theme.containerWidth};
    height: '100%';
    overflow-y: auto;
    justify-content: center;
    background-color: ${props => props.theme.containerBackgroundColor};
`;

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

export default Container;
