import type { ReactNode } from "react";
import { ThemeProvider } from "@mui/material/styles";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { cs } from "date-fns/locale";
import { theme } from "../theme";
import AppGlobalStyles from "../GlobalStyles";
import { DEFAULT_THEME_MODE } from "../../context/ThemeContext";

export default function MuiProvider({ children }: { children: ReactNode }) {
  // `defaultMode` is only the first-paint fallback before a stored preference is
  // read. It is pinned to ThemeContext's single `DEFAULT_THEME_MODE` constant
  // (the real source of truth for `<html data-theme>` / the `mui-mode` storage
  // key) so the two defaults can never drift and cause a one-frame mismatch.
  return (
    <ThemeProvider theme={theme} defaultMode={DEFAULT_THEME_MODE}>
      <AppGlobalStyles />
      <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={cs}>
        {children}
      </LocalizationProvider>
    </ThemeProvider>
  );
}
