src/components/Layout/MainLayout.jsx

import React from 'react';
import { Box } from '@mui/material';
import Header from './Header';
import Footer from './Footer';
import styled from '@emotion/styled';

const MainContent = styled(Box)(({ theme }) => ({
  minHeight: 'calc(100vh - 128px)', // Adjust based on your header/footer height
  padding: theme.spacing(3),
  [theme.breakpoints.down('sm')]: {
    padding: theme.spacing(2),
  },
}));

const MainLayout = ({ children }) => {
  return (
    <Box display="flex" flexDirection="column" minHeight="100vh">
      <Header />
      <MainContent component="main">
        {children}
      </MainContent>
      <Footer />
    </Box>
  );
};

export default MainLayout;