'use client';

/**
 * Lab Section Layout
 *
 * Code Style:
 * - Use `const` arrow function components (not function declarations)
 * - Use `type` instead of `interface` for type definitions
 * - Early returns for conditionals
 * - No inline comments (JSDoc headers only)
 * - Tailwind classes only
 *
 * Structure:
 * - Layout components: src/components/layout/lab/
 * - Feature components: src/components/lab/
 * - Pages: src/app/lab/{section}/page.tsx
 *
 * Sub-navigation items:
 * - /lab/generate - Image generation
 * - /lab/images - Image library browser
 * - /lab/live - Live generation testing
 * - /lab/upload - File upload interface
 */

import { ReactNode } from 'react';
import { usePathname } from 'next/navigation';
import { ApiKeyWidget } from '@/components/shared/ApiKeyWidget/apikey-widget';
import { ApiKeyProvider } from '@/components/shared/ApiKeyWidget/apikey-context';
import { PageProvider } from '@/contexts/page-context';
import { LabLayout } from '@/components/layout/lab/LabLayout';

type LabLayoutWrapperProps = {
  children: ReactNode;
};

const navItems = [
  { label: 'Generate', href: '/lab/generate' },
  { label: 'Images', href: '/lab/images' },
  { label: 'Live', href: '/lab/live' },
  { label: 'Upload', href: '/lab/upload' },
];

const LabLayoutWrapper = ({ children }: LabLayoutWrapperProps) => {
  const pathname = usePathname();

  return (
    <ApiKeyProvider>
      <PageProvider navItems={navItems} currentPath={pathname} rightSlot={<ApiKeyWidget />}>
        <LabLayout>{children}</LabLayout>
      </PageProvider>
    </ApiKeyProvider>
  );
};

export default LabLayoutWrapper;