import { type FC, type PropsWithChildren } from 'react';

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';

import Header from './Header';

type ContainerProps = {
  title: string;
};

const Container: FC<PropsWithChildren<ContainerProps>> = props => {
  const { children, title } = props;
  const ThemeProvider = useHuGoTheme();

  return (
    <ThemeProvider>
      <Stack
        sx={{
          height: '100vh',
          overflowY: 'auto',
          backgroundColor: 'new.background.layout.default',
        }}
      >
        <Header title={title} />
        {children}
      </Stack>
    </ThemeProvider>
  );
};

export default Container;