"use client";

import React, { useEffect } from "react";
import { LayoutWrapper } from "../features/dashboard/layout/layoutWrapper";
import { MainContent } from "../features/dashboard/layout/mainContent";
import SideBar from "../features/dashboard/sidebar/Sidebar";
import Header from "../features/dashboard/header/Header";

const DashboardLayout: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  useEffect(() => {
    // if (process.env.NODE_ENV === "development") {
    import("../../mock/browser").then(({ worker }) => {
      worker.start();
    });
    // }
  }, []);

  return (
    <LayoutWrapper>
      <SideBar />
      <div style={{ flexGrow: 1, display: "flex", flexDirection: "column" }}>
        <MainContent>
          <Header />
          {children}
        </MainContent>
      </div>
    </LayoutWrapper>
  );
};

export default DashboardLayout;