import { type PropsWithChildren } from 'react';

import Container from '@material-hu/mui/Container';

import useHuGoTheme from 'src/hooks/useHuGoTheme';

type LearningContainerProps = PropsWithChildren<{
  id?: string;
}>;

export const LearningContainer = ({ id, children }: LearningContainerProps) => {
  const HugoThemeProvider = useHuGoTheme();
  return (
    <HugoThemeProvider>
      <Container
        id={id}
        maxWidth="xl"
        sx={{
          py: 4,
          gap: 3,
          flexDirection: 'column',
          display: 'flex',
        }}
      >
        {children}
      </Container>
    </HugoThemeProvider>
  );
};