import { AuthProvider } from "@/contexts/auth-context"
import { SpotifyProvider } from "@/contexts/spotify-context"
import MantineProvider from "@/lib/mantine/mantine-provider"
//import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
//import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
//import { TanStackDevtools } from '@tanstack/react-devtools'
import { Toaster } from "sonner"

const Providers = ({ children }: { children: React.ReactNode }) => {
  return (
    <AuthProvider>
      <SpotifyProvider>
        <MantineProvider>
          {/*<TanStackDevtools
            eventBusConfig={{
              debug: false,
              connectToServerBus: true,
            }}
            plugins={[
              {
                name: 'TanStack Query',
                render: <ReactQueryDevtoolsPanel />,
              },
              {
                name: 'TanStack Router',
                render: <TanStackRouterDevtoolsPanel />,
              }
            ]}
          />*/}
          <Toaster position='top-center' />
          {children}
        </MantineProvider>
      </SpotifyProvider>
    </AuthProvider>
  )
}

export default Providers;