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


const styles = theme => ({
  subheading: {
    marginTop: theme.spacing.unit * 3,
    marginBottom: theme.spacing.unit * 3,
  }
});

const Section = ({
  name, Component, classes, sectionId
}) => (
  <Fragment>
    <div className={classes.subheading}>
      <FormattedMessage id={sectionId} />
      <Typography variant="caption" color="inherit">
        <br />
        {name}
      </Typography>
    </div>
    {Component}

  </Fragment>
);

export default withStyles(styles)(Section);