import { Content } from "antd/es/layout/layout";
import AppRoutes from "../AppRoutes";
import { Layout } from "antd";
import HeaderMenu from "../Header";
import { BreakpointLgWidth } from "../../utils";
import { memo } from "react";

const PageContent = memo(
  ({
    isSideMenuCollapsed,
    setIsSideMenuCollapsed,
    userSession,
    setUserSession,
  }) => {
    return (
      <Layout
        style={{
          marginLeft:
            isSideMenuCollapsed ||
            window.document.body.clientWidth < BreakpointLgWidth
              ? 0
              : 200,
        }}
      >
        <HeaderMenu
          isSideMenuCollapsed={isSideMenuCollapsed}
          setIsSideMenuCollapsed={setIsSideMenuCollapsed}
        />

        <Content
          style={{
            padding: 12,
          }}
        >
          <AppRoutes
            userSession={userSession}
            setUserSession={setUserSession}
          />
        </Content>
      </Layout>
    );
  }
);

export default PageContent;

/*
export default function PageContent({
  isSideMenuCollapsed,
  setIsSideMenuCollapsed,
  userSession,
  setUserSession,
}) {
  return (
    <Layout
      style={{
        marginLeft:
          isSideMenuCollapsed ||
          window.document.body.clientWidth < BreakpointLgWidth
            ? 0
            : 200,
      }}
    >
      <HeaderMenu
        isSideMenuCollapsed={isSideMenuCollapsed}
        setIsSideMenuCollapsed={setIsSideMenuCollapsed}
      />

      <Content
        style={{
          padding: 12,
        }}
      >
        <AppRoutes userSession={userSession} setUserSession={setUserSession} />
      </Content>
    </Layout>
  );
}
*/