import { Grid, GridItem } from '@chakra-ui/react';
import { Outlet } from 'react-router-dom';
import { NavBar, Footer, ErrorBoundary, ErrorViewer } from '../components/common';

const Layout = () => {
  return (
    <Grid
      templateAreas={{
        base: `"header"
                  "main"
                  "footer"`,
      }}
      gridTemplateRows={'70px 1fr 30px'}
      gridTemplateColumns={`1fr`}
      h="100vh"
      gap="1"
      fontWeight="bold"
    >
      <GridItem bg="#81a540" display="flex" alignItems="center" pl="2" area={'header'}>
        <NavBar isHomeLayout={true} />
      </GridItem>
      <GridItem pl="2" area={'main'}>
        <ErrorBoundary
          fallback={({ ...rest }) => {
            return <ErrorViewer {...rest} />;
          }}
        >
          <Outlet />
        </ErrorBoundary>
      </GridItem>
      <GridItem
        bg="#81a540"
        display="flex"
        alignItems="center"
        justifyContent="center"
        boxShadow="2xl"
        pl="2"
        area={'footer'}
      >
        <Footer />
      </GridItem>
    </Grid>
  );
};

export default Layout;
