import React, { Fragment } from 'react';
import { Field } from 'redux-form';
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 = ({
  change, name, component, classes, sectionId, patient, recorder
}) => (
  <Fragment>
    <div className={classes.subheading}>
      <FormattedMessage id={sectionId} />
      <Typography variant="caption" color="inherit">
        <br />
        {name}
      </Typography>
    </div>
    <Field
      name="conditions"
      fullWidth
      change={change}
      component={component}
      recorder={recorder}
      patient={patient}
    />

  </Fragment>
);

export default withStyles(styles)(Section);