import {
    Grid,
    GridCol,
} from '@/components/ui/grid';
import { MobilePage } from '@/components/ui/mobile';
import useAppConfigStore from '@/stores/appConfig';
import { useMainPage } from '@/stores/mainPage';

import { AppSidebar } from './AppSidebar';
import MainScreenContent from './MainScreenContent';

const MainScreenLayout = () => {

    const { isMobile } = useAppConfigStore();
    const { profile } = useMainPage();




    if (isMobile) {
        return <>

            <MobilePage>
                <MainScreenContent />
                <AppSidebar />
            </MobilePage>

        </>
    }

    return <>
        <Grid className='h-screen w-screen'>
            <GridCol width="300px" className='border-r'>
                <AppSidebar />
            </GridCol>
            <GridCol  >
                <MainScreenContent />
            </GridCol>
        </Grid>

    </>
}

export default MainScreenLayout;