import { type PropsWithChildren } from 'react';

import Stack from '@material-hu/mui/Stack';
import { type SxProps } from '@material-hu/mui/styles';

type ContentWrapperProps = PropsWithChildren<{ sx?: SxProps }>;

export const ContentWrapper = ({ children, sx = {} }: ContentWrapperProps) => {
  return (
    <Stack
      sx={{
        flex: 1,
        overflow: 'auto',
        scrollbarGutter: 'stable',
        width: '100%',
        pt: 2.5,
        pb: 5,
        px: 2,
        ...sx,
      }}
    >
      <Stack sx={{ gap: 2, maxWidth: 'lg', mx: 'auto', width: '100%' }}>
        {children}
      </Stack>
    </Stack>
  );
};