"use client";

import React from 'react';
import { CDPHooksProvider as BaseCDPHooksProvider } from '@coinbase/cdp-hooks';
import type { CDPConfig } from './CDPProvider';

export interface CDPHooksProviderProps {
  children: React.ReactNode;
  config: CDPConfig;
}

/**
 * CDP Hooks Provider for custom wallet implementations.
 * Use this when you want full control over the UI/UX and only need the hooks functionality.
 * 
 * @example
 * ```tsx
 * import { CDPHooksProvider } from 'cdp-wallet-onramp-kit';
 * 
 * const cdpConfig = {
 *   projectId: process.env.NEXT_PUBLIC_CDP_PROJECT_ID!,
 *   debugging: process.env.NODE_ENV === 'development',
 * };
 * 
 * function MyApp({ children }) {
 *   return (
 *     <CDPHooksProvider config={cdpConfig}>
 *       {children}
 *     </CDPHooksProvider>
 *   );
 * }
 * ```
 */
export function CDPHooksProvider({ children, config }: CDPHooksProviderProps) {
  const cdpConfig = {
    projectId: config.projectId,
    basePath: config.basePath || "https://api.cdp.coinbase.com/platform",
    useMock: config.useMock || false,
    debugging: config.debugging || false,
  };

  return (
    <BaseCDPHooksProvider config={cdpConfig}>
      {children}
    </BaseCDPHooksProvider>
  );
}