"use client";
import { Layout } from "antd";
import HeaderDashboard from "../_comps/layout/header";
import { useState } from "react";
import DrawerDashboard from "../_comps/layout/drawerDashboard";
import SideBar from "../_comps/layout/sideBar";
import { useGetUserPermission } from "./_api/query";

export default function LayoutDashboard({
  children,
}: {
  children: React.ReactNode;
}) {
  useGetUserPermission(); // Load user permissions
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);

  return (
    <div className="flex min-h-screen">
      {/* Render both components, use CSS to control visibility */}
      <DrawerDashboard
        open={isDrawerOpen}
        onClose={() => setIsDrawerOpen(false)}
      />
      <SideBar />
      <Layout>
        <HeaderDashboard setIsDrawerOpen={setIsDrawerOpen} />
        <main className="grid h-full">{children}</main>
      </Layout>
    </div>
  );
}