import { Box, styled } from '@mui/material';
import { Outlet } from 'react-router-dom';
import Header from './Header';
import Sidebar from './Sidebar';
import UserDataProvider from '../Provider/UserDataProvider';

const LayoutContainer = styled(Box)({
  display: 'flex',
  height: '100vh',
});

const MainContent = styled(Box)({
  flex: 1,
  display: 'flex',
  flexDirection: 'column',
  overflow: 'hidden',
});

const ContentArea = styled(Box)({
  flex: 1,
  padding: '20px',
  overflow: 'auto',
  backgroundColor: '#f5f7fa',
});

const MainLayout = () => {
  return (
    <UserDataProvider>
      <LayoutContainer>
        <Sidebar />
        <MainContent>
          <Header />
          <ContentArea>
            <Outlet />
          </ContentArea>
        </MainContent>
      </LayoutContainer>
    </UserDataProvider>
  );
};

export default MainLayout;