"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactNode, useState } from "react";

interface AnyspendProviderProps {
  children: ReactNode;
}

const defaultQueryClientConfig = {
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false,
      staleTime: 30000
    }
  }
} as const;

/**
 * AnyspendProvider is a top-level provider that wraps your application to provide
 * query caching and state management for all Anyspend hooks.
 *
 * Features:
 * - Memoized QueryClient instance to prevent unnecessary re-renders
 * - Optimized for performance with React.memo
 * - Safe to use at the application root
 * - Configures sensible defaults for query caching
 *
 * @example
 * ```tsx
 * function App() {
 *   return (
 *     <AnyspendProvider>
 *       <YourApp />
 *     </AnyspendProvider>
 *   );
 * }
 * ```
 */
export const AnyspendProvider = function AnyspendProvider({ children }: AnyspendProviderProps) {
  const [queryClient] = useState(() => new QueryClient(defaultQueryClientConfig));

  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
};