"use client";

import { useEffect, useState } from "react";

// interface Props {
//   children: React.ReactNode;
// }
import React, { ReactNode } from "react";
import { SidebarProvider } from "./sidebar-context";
import { Breadcrumbs } from "./breadcrumbs";
import { BurgerButtonIcon } from "../icons";
import { RetractingSidebar } from "../landing-page/retracting-sidedar";

export const AdminLayout = ({ children }: { children: ReactNode }) => {
  const [isOpen, setIsOpen] = useState(true);
  const updateSidebarData = (newData: boolean) => {
    setIsOpen(newData);
  };

  const [hasMounted, setHasMounted] = useState(false);

  // Hooks
  useEffect(() => {
    setHasMounted(true);
  }, []);

  // Render
  if (!hasMounted) return null;

  return (
    <SidebarProvider>
      <div className="!h-screen flex items-center flex-row !overflow-y-hidden">
        <RetractingSidebar
          sidebarData={isOpen}
          updateSidebarData={updateSidebarData}
        />
        <div className={`w-full h-full flex flex-col overflow-hidden`}>
          <div className="flex justify-between  border-b-2 dark:border-b-2 items-center dark:bg-black  dark:border-white">
            <Breadcrumbs />
            <button
              className="md:hidden items-center pr-4 justify-center h-10 w-10 flex z-50 text-zinc-700"
              onClick={() => updateSidebarData(true)}
            >
              <BurgerButtonIcon />
            </button>
          </div>

          {children}
        </div>
      </div>
    </SidebarProvider>
  );
};