/**
 * Example Root Layout with Analytics
 *
 * Shows how to integrate the AnalyticsProvider in a Next.js App Router layout.
 */

import { Suspense, type ReactNode } from 'react';

import { AnalyticsProvider } from './analytics-provider';

// ─────────────────────────────────────────────────────────────────────────────
// Layout
// ─────────────────────────────────────────────────────────────────────────────

interface RootLayoutProps {
  children: ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <body>
        {/*
         * Wrap in Suspense because AnalyticsProvider uses useSearchParams()
         * which requires a Suspense boundary in Next.js 13+
         */}
        <Suspense fallback={null}>
          <AnalyticsProvider
            collectorUrl={process.env.NEXT_PUBLIC_ANALYTICS_URL || 'http://localhost:4001'}
            appName={process.env.NEXT_PUBLIC_APP_NAME || 'my-app'}
            enabled={process.env.NODE_ENV !== 'test'}
            debug={process.env.NODE_ENV === 'development'}
          >
            {children}
          </AnalyticsProvider>
        </Suspense>
      </body>
    </html>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Metadata
// ─────────────────────────────────────────────────────────────────────────────

export const metadata = {
  title: 'My App',
  description: 'Example Next.js app with analytics',
};
