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

const styles = {
    FeedbackNoticeRootWrapper: {
        display: 'inline-flex',
        marginLeft: 20,
    },
    FeedbackTypography: {
        margin: 'auto 5px',
    },
};

class FeedbackNotice extends React.Component {
    static propTypes = {
        errorNotice: PropTypes.string,
        classes: PropTypes.object,
    };

    state = {};

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

        return (
            <Grid item xs={12} className={classes.FeedbackNoticeRootWrapper}>
                <Icon component="div" color="error">
                    error
                </Icon>
                <Typography component="div" color="error" className={classes.FeedbackTypography}>
                    {errorNotice}
                </Typography>
            </Grid>
        );
    }
}

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