import React from 'react'; 
import { Box } from '@/atoms/box';
import { Flex } from '@/atoms/flex';
import { Grid } from '@/atoms/grid';
import { Separator } from '@/atoms/separator';
import { AspectRatio } from '@/atoms/aspect-ratio';

export function CurriculumV2Layout(props: {
  NavBar: React.ReactNode;
  SideBar: React.ReactNode;
  Contents: React.ReactNode;
  SideNav: React.ReactNode;
  style?: React.CSSProperties;
}): React.ReactNode {
  const { NavBar, Contents, SideBar, SideNav, style } = props;

  return (
    <Grid align="center" height="100%" rows="auto 1px 1fr" style={style} width="100%">
      <Flex
        align="center"
        height={{ initial: '40px', md: '64px' }}
        width="100%"
      >
        {NavBar}
      </Flex>
      <Separator size="4" />
      <Flex
        align="center"
        height="100%"
        justify="center"
        overflow="hidden"
        width="100%"
      >
        <Grid
          columns={{ initial: '1', md: '1fr 340px' }}
          height="100%"
          maxWidth="1440px"
          rows={{ initial: 'auto 1fr', md: 'auto' }}
          width="100%"
        >
          <Box height="100%" width="100%">
            <AspectRatio ratio={16 / 9}>{Contents}</AspectRatio>
            {SideNav}
          </Box>
          {SideBar}
        </Grid>
      </Flex>
    </Grid>
  );
}
