import { AppShell } from '@mantine/core';
import { Outlet } from 'react-router';
import { Header } from '@components/Header';
import { Footer } from '@components/Footer';

export function MainLayout() {
  return (
    <AppShell padding={0} mih={'100dvh'}>
      <AppShell.Header>
        <Header />
      </AppShell.Header>
      <AppShell.Main p={0} style={{ display: 'flex', minHeight: 0 }}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            flex: 1,
            minHeight: 0
          }}
        >
          <Outlet />
        </div>
      </AppShell.Main>
      <AppShell.Footer>
        <Footer />
      </AppShell.Footer>
    </AppShell>
  );
}