'use client';

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';

interface DemoLayoutProps {
  children: ReactNode;
}

const navItems = [
  { label: 'Text to Image', href: '/demo/tti' },
  { label: 'Upload', href: '/demo/upload' },
  { label: 'Gallery', href: '/demo/gallery' },
];

export default function DemoLayout({ children }: DemoLayoutProps) {
  const pathname = usePathname();

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