import { useLayout } from './context';
import { Sidebar } from './sidebar';
import { HeaderMobile } from './header-mobile';
import { Aside } from './aside';
import { cn } from '@/lib/utils';
import { useEffect, useState } from 'react';

export function Wrapper({ children }: { children: React.ReactNode }) {
  const {isMobile} = useLayout();
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  return (
    <>
      {isMobile && <HeaderMobile />}

      <div className="flex flex-col lg:flex-row grow py-(--page-space)">
        <div className="flex grow rounded-xl">
          {!isMobile && <Sidebar />}
          {!isMobile && <Aside />}

          <div className={cn(
            'grow pt-(--header-height-mobile) lg:pt-0 lg:overflow-hidden lg:ms-(--sidebar-width) lg:in-data-[sidebar-collapsed=true]:ms-(--sidebar-width-collapse) lg:duration-300 lg:me-[calc(var(--aside-width))]',
            isMounted && 'lg:transition-[margin]'
          )}>
            <main className="grow px-2.5 lg:p-0" role="content">
              {children}
            </main>
          </div>
        </div>
      </div>
    </>
  );
}
