import { docNavigation, groupDocNavigation } from '@/lib/navigation';
import { fetchPublicSettings } from '@/lib/api';
import { PublicSettingsProvider } from '@/providers/public-settings-provider';
import { DocsHeader, DocsSidebar } from '@/components/docs-shell';

export const dynamic = 'force-dynamic';

export default async function DocsLayout({ children }: { children: React.ReactNode }) {
  const initialSettings = await fetchPublicSettings();
  const groups = groupDocNavigation(docNavigation);

  return (
    <PublicSettingsProvider initialSettings={initialSettings}>
      <div className="min-h-screen bg-white dark:bg-zinc-950">
        <DocsHeader />
        <div className="mx-auto grid max-w-screen-2xl grid-cols-1 gap-8 px-4 py-8 lg:grid-cols-[240px_minmax(0,1fr)] lg:px-8 xl:grid-cols-[240px_minmax(0,1fr)_200px]">
          <aside className="hidden lg:block">
            <div className="sticky top-20">
              <DocsSidebar groups={groups} />
            </div>
          </aside>
          {children}
        </div>
      </div>
    </PublicSettingsProvider>
  );
}
