import React from 'react';
import {MdWidgets} from 'react-icons/md';

import {withTheme, injectSheet} from '../../../lib/theme';

import {blockName} from '../BlockName';

const styling = theme => ({
    wrapper: {
        margin: 0,
        display: 'flex',
        //flexDirection:
        alignItems: 'center',
        flexShrink: 0
    }
});

class ContentBlock extends React.Component {

    render() {
        const {t, theme, classes, data} = this.props;

        return (
            <React.Fragment>
                <div className={classes.wrapper}>
                    <MdWidgets size={'1.5em'} style={{flexShrink: 0, marginRight: theme.gutter.base * 2 + 'px'}}/>
                    {blockName(data.id, t)}
                </div>
            </React.Fragment>
        );
    };
}

export default withTheme(injectSheet(styling)(ContentBlock));