import Header from './Header';
import { AppMenu } from './Menu';
import { NavigationBar } from './Navigation';
import { screens } from '@/config/ui';
import { max, min } from '@/styles/mq';
import dynamic from 'next/dynamic';
import styled from 'styled-components';

const MediaQuery = dynamic(() => import('react-responsive'), {
  ssr: false,
});

const Main = styled.main`
  margin: 8px 0;

  ${max('laptop')} {
    margin-bottom: 40px; // height of the navigation bar
  }

  ${min('desktop-xl')} {
    margin: 8px 10%;
  }
`;

export default function Layout({ children, user }) {
  return (
    <>
      <Header />
      {user?.admin ? <AppMenu /> : false}
      <Main>{children}</Main>
      <MediaQuery maxWidth={screens.laptop}>
        <NavigationBar />
      </MediaQuery>
    </>
  );
}