import { ReactNode } from 'react'
import { ThemeProvider, ThemeProviderProps } from '../../hooks/useTheme.js'
import { ToastProvider } from '../Toast/index.js'
import { DialogProvider } from '../Dialog/index.js'
import { MediaPreviewsContextProvider } from '../Media/index.js'

type ProviderProps = {
  children: ReactNode
  forcedTheme?: ThemeProviderProps['forcedTheme']
}

function Provider({ children, forcedTheme }: ProviderProps) {
  return (
    <MediaPreviewsContextProvider>
      <ThemeProvider forcedTheme={forcedTheme}>
        <ToastProvider>
          <DialogProvider>{children}</DialogProvider>
        </ToastProvider>
      </ThemeProvider>
    </MediaPreviewsContextProvider>
  )
}

export type { ProviderProps }
export { Provider }
