import React from 'react';
import {injectSheet} from '../../lib/theme';
import StyleGrid from '../../lib/StyleGrid';
import {LoadingLangScreen} from "../../component/LoadingLangScreen";

const styling = theme => ({
    wrapper: {
        display: 'block',
        position: 'relative',
        margin: '0 auto auto auto',
        padding: '0 ' + theme.gutter.base * 2 + 'px',
        width: '100%',
        [StyleGrid.mdUp]: {
            width: '960px',
            padding: 0,
        },
        [StyleGrid.lgUp]: {
            width: '1200px'
        }
    },
    logo: {
        height: '48px',
        width: '48px'
    }
});

class Content extends React.Component {
    render() {
        const {classes, loading_lang} = this.props;

        return (
            <React.Fragment>
                <LoadingLangScreen loading={loading_lang}/>
                <div className={classes.wrapper}>
                    {this.props.children}
                </div>
            </React.Fragment>
        );
    }
}

export default injectSheet(styling)(Content);
