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

const styles = theme => ({
  alert: {
    padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`,
    margin: `${theme.spacing.unit / 2}px 0px`,
    backgroundColor: 'red',
    color: 'white'
  }
});

const Alert = ({
  styleSheet, classes, type, messages
}) => (
  <div
    className={classNames(styleSheet.alert, classes.alert)}
  >
    <Typography variant="body2" color="inherit">
      {messages[type]}
    </Typography>
  </div>
);

Alert.propTypes = {
  type: PropTypes.string,
  messages: PropTypes.shape({
  }),
  styleSheet: PropTypes.shape({
    alert: PropTypes.string,
  }),
  classes: PropTypes.shape({
    alert: PropTypes.string,
  })
};

Alert.defaultProps = {
  type: 'default',
  messages: {
    default: 'default error'
  },
  classes: {
    alert: 'alert'
  },
  styleSheet: {
    alert: 'alert'
  },
};
export default withStyles(styles)(Alert);