import React, { useState } from 'react';
import { Outlet } from 'react-router-dom';
import { Box } from '@mui/material';
import Sidebar from '../components/Sidebar';
import Header from '../components/Header';

function Dashboard() {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const handleMenuClick = () => {
    setSidebarOpen(!sidebarOpen);
  };

  const handleSidebarClose = () => {
    setSidebarOpen(false);
  };

  return (
    <Box sx={{ 
      display: 'flex', 
      height: '100%',
      minHeight: '100vh',
      minHeight: '-webkit-fill-available',
      overflow: 'hidden',
      width: '100%',
      position: 'relative'
    }}>
      <Sidebar open={sidebarOpen} onClose={handleSidebarClose} />
      <Box sx={{ 
        flexGrow: 1, 
        display: 'flex', 
        flexDirection: 'column',
        overflow: 'hidden',
        width: { xs: '100%', md: 'calc(100% - 200px)' },
        height: '100%'
      }}>
        <Header onMenuClick={handleMenuClick} />
        <Box sx={{ 
          flexGrow: 1, 
          overflow: 'auto',
          WebkitOverflowScrolling: 'touch',
          p: { xs: 1, sm: 2 },
          height: '100%'
        }}>
          <Outlet />
        </Box>
      </Box>
    </Box>
  );
}

export default Dashboard;
