"use client";

import React from 'react';
import { CDPReactProvider, type Theme } from '@coinbase/cdp-react';

export interface CDPConfig {
  projectId: string;
  basePath?: string;
  useMock?: boolean;
  debugging?: boolean;
}

export interface AppConfig {
  name: string;
  logoUrl?: string;
}

export interface CDPProviderProps {
  children: React.ReactNode;
  config: CDPConfig;
  app: AppConfig;
  theme?: Theme;
}

/**
 * CDP Provider component that wraps your app with Coinbase Developer Platform functionality.
 * This enables embedded wallet and onramp features throughout your application.
 * 
 * @example
 * ```tsx
 * import { CDPProvider } from 'cdp-wallet-onramp-kit';
 * 
 * const cdpConfig = {
 *   projectId: process.env.NEXT_PUBLIC_CDP_PROJECT_ID!,
 *   debugging: process.env.NODE_ENV === 'development',
 * };
 * 
 * const appConfig = {
 *   name: "My App",
 *   logoUrl: "/logo.png",
 * };
 * 
 * function MyApp({ children }) {
 *   return (
 *     <CDPProvider config={cdpConfig} app={appConfig}>
 *       {children}
 *     </CDPProvider>
 *   );
 * }
 * ```
 */
export function CDPProvider({ children, config, app, theme }: CDPProviderProps) {
  const cdpConfig = {
    projectId: config.projectId,
    basePath: config.basePath || "https://api.cdp.coinbase.com/platform",
    useMock: config.useMock || false,
    debugging: config.debugging || false,
  };

  return (
    <CDPReactProvider config={cdpConfig} app={app} theme={theme}>
      {children}
    </CDPReactProvider>
  );
}

/**
 * Re-export CDPHooksProvider for convenience
 */
export { CDPHooksProvider } from './CDPHooksProvider';