import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider } from 'wagmi';
import { RainbowKitProvider, darkTheme, lightTheme } from '@rainbow-me/rainbowkit';
import { walletConfig } from '../config/wallet';
import { useTheme } from '../hooks/useTheme';
import { PolymarketAuthProvider } from '../hooks/PolymarketAuthProvider';
import '@rainbow-me/rainbowkit/styles.css';

const queryClient = new QueryClient();

const rkDark = darkTheme({
  accentColor: '#3b82f6',
  accentColorForeground: 'white',
  borderRadius: 'medium',
  overlayBlur: 'small',
});

const rkLight = lightTheme({
  accentColor: '#2563eb',
  accentColorForeground: 'white',
  borderRadius: 'medium',
  overlayBlur: 'small',
});

export default function WalletProvider({ children }: { children: React.ReactNode }) {
  const { theme } = useTheme();

  return (
    <WagmiProvider config={walletConfig}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider theme={theme === 'dark' ? rkDark : rkLight}>
          <PolymarketAuthProvider>
            {children}
          </PolymarketAuthProvider>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}