import React from 'react';
import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { useAppTheme } from './index';

/**
 * Custom ThemeProvider that uses the app's theme with dark mode support
 * This component should be used instead of the direct MUI ThemeProvider
 */
const ThemeProvider = ({ children }) => {
  const theme = useAppTheme();

  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </MuiThemeProvider>
  );
};

export default ThemeProvider;