"use client"

import type { JSX, ReactNode } from "react"

import { Theme } from "@radix-ui/themes"
import { Provider as ReduxProvider } from "react-redux"

import { store } from "@shared/store"

import { BreadcrumbsProvider } from "./BreadcrumbsContext"
import { QueryClientProvider } from "./QueryClientProvider"
import { SocketProvider } from "./SocketProvider"
import { ThemeSync } from "./ThemeSync"
import { UserSync } from "./UserSync"

export const AppProviders = ({
	children,
}: {
	children: ReactNode
}): JSX.Element => {
	return (
		<ReduxProvider store={store}>
			<QueryClientProvider>
				<UserSync />
				<SocketProvider>
					<ThemeSync />
					<BreadcrumbsProvider>
						<Theme
							accentColor="plum"
							grayColor="mauve"
							radius="medium"
							scaling="100%"
							appearance="inherit"
						>
							{children}
						</Theme>
					</BreadcrumbsProvider>
				</SocketProvider>
			</QueryClientProvider>
		</ReduxProvider>
	)
}
