import { Avatar, Container, Flex, Text } from "@chakra-ui/react";
import React from "react";
import { NavBar } from "./NavBar";

interface Props {
  withContainer?: boolean;
  children?: React.ReactNode;
  pageTitle?: string;
  pageSubtitle?: string;
  headerSectionSize?: "sm" | "lg"; //defaults to sm
  includeNavBar?: boolean;
}

// /**
//  * Layout composes Nav Bar and justifies children content
//  * @param param0
//  */

const Layout: React.FC<Props> = (props: Props) => {
  return (
    <Flex
      minH="100vh"
      w="100vw"
      overflowX="hidden"
      backgroundColor="neutral.white"
      direction="column"
    >
      {props.includeNavBar && (
        <NavBar
          navlinks={[
            { path: "/projects", text: "My Projects" },
            { path: "/reporting", text: "Reporting" },
            { path: "/admin", text: "Admin" },
          ]}
          ctaItems={[<Avatar boxSize="48px" />]}
        />
      )}
      <Flex
        // h={props.headerSectionSize === "lg" ? 441 : 376}
        align="left"
        px={10}
        direction="column"
      >
        <Text
          textStyle="heading.h6"
          color="brand.primary"
          mt={props.includeNavBar ? "5rem" : "0"}
        >
          {props.pageTitle ?? ""}
        </Text>
      </Flex>
      <Flex as="main" flexDirection="column" flexGrow={1} maxW="100vw">
        {props.withContainer ? (
          <Container maxW="1200px" d="flex" flexDirection="row">
            {props.children}
          </Container>
        ) : (
          props.children
        )}
      </Flex>
    </Flex>
  );
};
export default Layout;