import { Grid, Typography } from '@mui/material';
import React from 'react';
import { useStyles } from './styles/formSectionHeadingStyles';

const FormSectionHeading = ({
  title,
  className = '',
  bracketText = '',
  bracketTextClassName = '',
}) => {
  const classes = useStyles();
  return (
    <>
      <Grid className={`${classes.root} ${className}`}>
        <Typography className={classes.title}>
          {title}
          {bracketText && (
            <span className={`${classes.bracketText} ${bracketTextClassName}`}>
              {' '}
              ({bracketText})
            </span>
          )}
        </Typography>
      </Grid>
    </>
  );
};

export default FormSectionHeading;
