import React from 'react';
import { ThemeProvider, createTheme, CssBaseline, AppBar, Toolbar, Typography, Container, Box } from '@mui/material';
import Dashboard from './Dashboard';

const darkTheme = createTheme({
    palette: {
        mode: 'light',
        primary: {
            main: '#2c3e50',
        },
        background: {
            default: '#f4f4f9',
        },
    },
});

function App() {
    return (
        <ThemeProvider theme={darkTheme}>
            <CssBaseline />
            <Box sx={{ flexGrow: 1 }}>
                <AppBar position="static">
                    <Toolbar>
                        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                            AC Infinity Dashboard
                        </Typography>
                    </Toolbar>
                </AppBar>
                <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
                    <Dashboard />
                </Container>
            </Box>
        </ThemeProvider>
    );
}

export default App;