// src/components/layout/AppShell.tsx
'use client';

import React from 'react';
import { AppBar, Box, Toolbar } from '@mui/material';
import Navbar from './Navbar';

const AppShell = ({ children }: { children: React.ReactNode }) => {
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      <AppBar position="fixed">
        <Toolbar>
          <Navbar />
        </Toolbar>
      </AppBar>
      
      <Box component="main" sx={{ flexGrow: 1, p: 3, mt: 8 }}>
        {children} {/* This replaces <Outlet /> */}
      </Box>
    </Box>
  );
};