import React from 'react';
import { ThemeProvider, CssBaseline, AppBar, Toolbar, Typography, Box } from '@mui/material';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import theme from './theme';
import CreateSession from './pages/CreateSession';

import SessionPage from './pages/SessionPage';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Router>
        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
          <AppBar position="static">
            <Toolbar>
              <Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
                <img src="/logo-white.svg" alt="Unisono Logo" style={{ height: 24, marginRight: 8 }} />
                <Typography variant="h6" component="div">
                  Unisono
                </Typography>
              </Box>
            </Toolbar>
          </AppBar>
          <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
            <Routes>
              <Route path="/" element={<CreateSession />} />
              {/* Other routes will be added here */}
              <Route path="/session/:sessionId" element={<SessionPage />} />
            </Routes>
          </Box>
        </Box>
      </Router>
    </ThemeProvider>
  );
}

export default App;