import { AppContent } from '@/components/layout/app-content';
import { AppShell } from '@/components/layout/app-shell';
import { AdminHeader } from '@/components/layout/header/admin-header';
import { AdminSidebar } from '@/components/layout/sidebar/admin-sidebar';
import { setThemeScope } from '@/utils/theme-manager';
import { Head } from '@inertiajs/react';
import { useLayoutEffect, type PropsWithChildren } from 'react';

interface AdminLayoutProps {
  title?: string;
}

export default function AdminLayout({
  children,
  title,
}: PropsWithChildren<AdminLayoutProps>) {
  useLayoutEffect(() => {
    setThemeScope('admin');

    return () => {
      document.documentElement.dataset.forceLight = 'false';
    };
  }, []);
  return (
    <>
      <Head title={title} />
      <AppShell variant="sidebar">
        <AdminSidebar />
        <AppContent variant="sidebar" className="overflow-x-hidden">
          <AdminHeader />
          <div className="p-4">{children}</div>
        </AppContent>
      </AppShell>
    </>
  );
}