import type { FunctionComponent, PropsWithChildren } from "react"
import ThemeClientContextProvider from "./ThemeClientContextProvider"
import ThemeServerContextProvider, {
	useServerTheme
} from "./ThemeServerContextProvider"

const ThemeProviderWrapper: FunctionComponent<PropsWithChildren<{}>> = ({
	children
}) => {
	const theme = useServerTheme()
	return (
		<ThemeClientContextProvider defaultTheme={theme}>
			{children}
		</ThemeClientContextProvider>
	)
}

const ThemeProvider: FunctionComponent<PropsWithChildren<{}>> = ({
	children
}) => {
	return (
		<ThemeServerContextProvider>
			<ThemeProviderWrapper>{children}</ThemeProviderWrapper>
		</ThemeServerContextProvider>
	)
}

export default ThemeProvider