import { Content, Header } from "antd/es/layout/layout";
import AppRoutes from "../AppRoutes";
import { Button, Layout } from "antd";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";

export default function PageContent({
  isSideMenuCollapsed,
  setIsSideMenuCollapsed,
}) {
  return (
    <Layout style={{ marginLeft: isSideMenuCollapsed ? 0 : 200 }}>
      <Header
        style={{
          position: "sticky",
          top: 0,
          zIndex: 10,
          width: "100%",
          display: "flex",
          alignItems: "center",
          padding: 0,
          background: "#fff",
        }}
      >
        <Button
          type="text"
          icon={
            isSideMenuCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />
          }
          onClick={() => setIsSideMenuCollapsed(!isSideMenuCollapsed)}
          style={{ fontSize: "16px", width: 64, height: 64 }}
        />

        <h1 style={{ fontSize: "16px", margin: 0 }}>Header</h1>
      </Header>

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