import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Icon from '@material-ui/core/Icon';
import PropTypes from 'prop-types';

const styles = () => ({
    iconHover: {
        margin: 'auto 10px auto 0',
    },
    MuiBodyRoot: {
        display: 'flex',
        margin: '20px 0',
        lineHeight: 1.6,
    },
});

class Notification extends React.Component {
    static propTypes = {
        icon: PropTypes.string,
        notification: PropTypes.string,
        classes: PropTypes.object,
        color: PropTypes.string,
    };

    render() {
        const { icon, notification, classes, color } = this.props;
        return (
            <Grid item>
                <Typography variant="body2" color={color} className={classes.MuiBodyRoot}>
                    <Icon key={icon} className={classes.iconHover}>
                        {icon}
                    </Icon>
                    {notification}
                </Typography>
            </Grid>
        );
    }
}

export default withStyles(styles, { name: 'Notification' })(Notification);
