import React, { Fragment } from 'react';
import Grid from '@material-ui/core/Grid';
import { Typography } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import { FormattedMessage } from 'react-intl';
import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/Add';

const styles = theme => ({
  subheading: {
    marginTop: theme.spacing.unit * 3,
    marginBottom: theme.spacing.unit * 3,
    boxShadow: `${theme.spacing.unit * 1}px ${theme.spacing.unit * 1}px ${theme.spacing.unit * 1}px grey`,
    borderStyle: 'round',
    display: 'flex'
  }
});
const NextActions = ({
  title,
  classes,
  messageId,
  click,
  disabled
}) => (
  <Fragment>
    <Button
      className={classes.subheading}
      onClick={click}
      disabled={disabled}
    >
      <AddIcon />
      <Typography
        variant="subheading"
        component="p"
      >
        {title}
      </Typography>
    </Button>
  </Fragment>
);

export default withStyles(styles)(NextActions);