import type { PropsWithChildren, ReactElement } from 'react';
import Grid2 from '@mui/material/Grid2';
import makeStyles from '@mui/styles/makeStyles';
import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';

interface OneColumnProps extends PConnProps {
  // If any, enter additional props that only exist on this component
}

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

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

  const { children } = props;

  return (
    <Grid2 container spacing={2}>
      <Grid2 size={{ xs: 12 }} className={classes.colStyles}>
        {(children as ReactElement[]).map(child => {
          return child;
        })}
      </Grid2>
    </Grid2>
  );
}