import React from 'react';
import StyleGrid from "../../lib/StyleGrid";
import {withTheme, injectSheet} from '../../lib/theme';

const styling = theme => ({
    subTitle: {},
    dateWrapper: {
        display: 'flex',
        width: '100%',
        flexWrap: 'wrap',
        margin: '6px 0'
    },
    dateSingle: {
        [StyleGrid.smx]: {
            width: '100%'
        },
        '&:last-child': {
            [StyleGrid.smUp]: {
                marginLeft: '12px'
            }
        }
    },
    dateLbl: {
        marginRight: '6px',
        fontSize: '0.875rem'
    },
    dateValue: {
        fontSize: '0.875rem'
    }
});

class ArticleDetailHead extends React.Component {

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

        return (
            data.date_create || data.date_update ?
                <div className={classes.dateWrapper}>
                    {data.date_create ?
                        <div className={classes.dateSingle}>
                            <span className={classes.dateLbl}>{t('date.created')}</span>
                            <span className={classes.dateValue}>{data.date_create}</span>
                        </div>
                        : null}
                    {data.date_update ?
                        <div className={classes.dateSingle}>
                            <span className={classes.dateLbl}>{t('date.updated')}</span>
                            <span className={classes.dateValue}>{data.date_update}</span>
                        </div>
                        : null}
                </div>
                : null
        )
    };
}

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