'use client'

import CssBaseline from '@mui/material/CssBaseline'
import { ThemeProvider } from '@mui/material/styles'
import { ThemeModeProvider, useThemeMode } from '@/contexts/ThemeMode'
import { createAppTheme } from '@/lib/theme'

function ThemedContent({ children }: { children: React.ReactNode }) {
  const { mode } = useThemeMode()
  return (
    <ThemeProvider theme={createAppTheme(mode)}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  )
}

export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
  return (
    <ThemeModeProvider>
      <ThemedContent>{children}</ThemedContent>
    </ThemeModeProvider>
  )
}
