import React from 'react'
import { Box } from '@mui/material';
import Sidebar from './Sidebar';

const Layout = ({ children }: { children: React.ReactNode }) => {
  return (
    <Box id="app-layout" sx={{
      height: 'calc(100vh - 1.4rem)',
      overflow: 'hidden',
      p: 1.5,
      pt: 0,
      display: 'flex',
      flexDirection: 'row',
      gap: 1.5,
    }}>

      {/* SIDEBAR */}
      <Box id="app-sidebar-wrapper" sx={{
        width: 'fit-content',
        height: '100%',
        display: 'flex',
        flexDirection: 'row',
        gap: 1.5
      }}>
        <Sidebar />
      </Box>

      <Box id="app-children-wrapper" sx={{
        width: 1,
        overflowY: 'auto',
        borderRadius: (theme) => theme.shape.borderRadius,
        height: '100%',
        bgcolor: 'background.paper',
      }}>
        {children}
      </Box>
    </Box>
  )
}

export default Layout;