import { Box } from '@mui/material';
import { ReactNode } from '@tanstack/react-router';
import { FC } from 'react';
import Footer from '../Footer/Footer';
import Header from '../Header/Header';

const HeaderLayout: FC<{ children?: ReactNode }> = ({ children }) => {
  return (
    <>
      <Header />
      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
        <Box sx={{ maxWidth: '800px', flexGrow: 1 }}>{children}</Box>
      </Box>
      <Box sx={{ flexGrow: 1 }} />
      <Footer />
    </>
  );
};

export default HeaderLayout;
