import Grid2 from '@mui/material/Grid2';
import makeStyles from '@mui/styles/makeStyles';

interface OneColumnProps {
  // If any, enter additional props that only exist on this component
  children: any[];
}

const useStyles = makeStyles((/* theme */) => ({
  colStyles: {
    display: 'grid',
    gap: '1rem',
    alignContent: 'baseline'
  }
}));

export default function OneColumn(props: OneColumnProps) {
  const classes = useStyles();

  const { children } = props;

  return (
    <Grid2 container spacing={2}>
      {{! pick new delimiters for mustache }}
      {{=<% %>=}}
      <Grid2 size={{ xs: 12 }} className={classes.colStyles}>
        {children.map(child => {
          return child;
        })}
      </Grid2>
      <%={{ }}=%>     {{! revert delimiters for mustache }}
    </Grid2>
  );
}