import { ThemeProvider } from '@mui/material';
import { useState } from 'react';
import Dashboard from './components/Dashboard';
import DebugPanel from './components/DebugPanel';
import { lightTheme, darkTheme } from './theme';
import './App.css';

function App() {
  const [isDark, setIsDark] = useState(true);
  const debugMode = import.meta.env.REACT_APP_DEBUG_MODE === 'true';

  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <div className={isDark ? 'app-dark' : 'app-light'}>
        <Dashboard
          themeToggle={() => setIsDark(!isDark)}
          isDark={isDark}
        />
        {debugMode && <DebugPanel />}
      </div>
    </ThemeProvider>
  );
}

export default App;
