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

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} = this.props;

        return (
            <div className={classes.wrapper}>
                {this.props.loading_lang ? <Loading absolute={true}/> : null}
                {this.props.children}
            </div>
        );
    }
}

export default injectSheet(styling)(Content);
