import React from "react";
import {GridItem, SimpleGrid, Stack} from "@chakra-ui/react";

interface DashboardProps {
    backGround?: string,
    sideBar?: any,
    NavBar?: any,
    body?: any,
}


export function DashboardContainer(props: DashboardProps) {
    const {
        backGround = "#F7F7F7",
        sideBar,
        NavBar,
        body,
    } = props;

    return (
        <SimpleGrid columns={12} w="100%">
            <GridItem
                pos="relative"
                colSpan={sideBar ? 2 : 0}>
                <Stack h="100%" w="100%">
                    {sideBar ?? ''}
                </Stack>
            </GridItem>

            <GridItem
                w="auto"
                overflowY="auto"
                bg={backGround}
                colSpan={sideBar ? 10 : 12}>
                <Stack>
                    {NavBar ?? ''}
                </Stack>
                <Stack
                    minH="100vh"
                    width="100%"
                    p={!sideBar && !NavBar ? "" : "30px"}>
                    {body ?? ''}
                </Stack>
            </GridItem>
        </SimpleGrid>

    );
}