"use client";

import { Footer } from "@/components/admin-panel/footer";
import { Sidebar } from "@/components/admin-panel/sidebar";
import { useSidebar } from "@/hooks/use-sidebar";
import { useStore } from "@/hooks/use-store";
import { cn } from "@/lib/utils";

export default function AdminPanelLayout({
  children
}: {
  children: React.ReactNode;
}) {
  const sidebar = useStore(useSidebar, (x) => x);
  if (!sidebar) return null;
  const { getOpenState, settings } = sidebar;
  return (
    <>
      <Sidebar />
      <main
        className={cn(
          "min-h-[calc(100vh_-_56px)] bg-zinc-50 dark:bg-zinc-900 transition-[margin-left] ease-in-out duration-300",
          !settings.disabled
            ? getOpenState()
              ? "ml-0 lg:ml-72" // Sidebar geöffnet
              : "ml-0 lg:ml-[90px]" // Sidebar minimiert
            : "ml-0" // Sidebar deaktiviert
        )}
      >
        {children}
      </main>
      <footer
        className={cn(
          "transition-[margin-left] ease-in-out duration-300",
          !settings.disabled
            ? getOpenState()
              ? "ml-0 lg:ml-72"
              : "ml-0 lg:ml-[90px]"
            : "ml-0"
        )}
      >
        <Footer />
      </footer>
    </>
  );
}