'use client';

import { usePathname } from 'next/navigation';
import { DocsSidebar } from '@/components/docs/layout/DocsSidebar';
import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout';
import { ApiKeyWidget } from '@/components/shared/ApiKeyWidget/apikey-widget';
import { ApiKeyProvider } from '@/components/shared/ApiKeyWidget/apikey-context';
import { PageProvider } from '@/contexts/page-context';

const navItems = [
  { label: 'API', href: '/docs/' },
  { label: 'SDK', href: '#', disabled: true },
  { label: 'MCP', href: '#', disabled: true },
  { label: 'CLI', href: '#', disabled: true },
  { label: 'Lab', href: '#', disabled: true },
];

export default function DocsRootLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  return (
    <ApiKeyProvider>
      <PageProvider
        navItems={navItems}
        currentPath={pathname}
        rightSlot={<ApiKeyWidget />}
      >
        <ThreeColumnLayout
          left={
            <div className="border-r border-white/10 bg-slate-950/50 backdrop-blur-sm sticky top-12 h-[calc(100vh-3rem)] overflow-y-auto">
              <DocsSidebar currentPath={pathname} />
            </div>
          }
          center={children}
        />
      </PageProvider>
    </ApiKeyProvider>
  );
}