import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { ThemeBrowser } from './components/themes/ThemeBrowser.tsx';
import { ThemeDetailPage } from './components/themes/ThemeDetailPage.tsx';
import { LayoutDetailPage } from './components/themes/LayoutDetailPage.tsx';
import { LayoutPreviewPage } from './components/themes/LayoutPreviewPage.tsx';
import { NewPresentationPage } from './components/presentations/NewPresentationPage.tsx';
import { PresentationViewer } from './components/presentations/PresentationViewer.tsx';
import { PresentationMode } from './components/presentations/PresentationMode.tsx';
import { PresentationEditor } from './components/presentations/PresentationEditor.tsx';
import { SlideEditor } from './components/slide-editor/SlideEditor.tsx';
import { PresentationsList } from './components/presentations/PresentationsList.tsx';
import { AppHeader } from './components/AppHeader.tsx';
import { Welcome } from './components/Welcome.tsx';
import './App.css'
import './components/themes/ThemeBrowser.css'

function App() {
  return (
    <Router>
      <div className="app-root">
        <AppHeader />
        <main className="app-main">
          <Routes>
            <Route path="/" element={<Welcome />} />
            <Route path="/presentations" element={<PresentationsList />} />
            <Route path="/presentations/new" element={<NewPresentationPage />} />
            <Route path="/presentations/:presentationId/edit/slides/:slideNumber" element={<PresentationEditor />} />
            <Route path="/presentations/:presentationId/view/slides/:slideNumber" element={<PresentationViewer />} />
            <Route path="/presentations/:presentationId/present/:slideNumber" element={<PresentationMode />} />
            <Route path="/presentations/:presentationId/slide/:slideId/edit" element={<SlideEditor />} />
            <Route path="/themes" element={<ThemeBrowser />} />
            <Route path="/themes/:themeId" element={<ThemeDetailPage />} />
            <Route path="/themes/:themeId/layouts/:layoutId" element={<LayoutDetailPage />} />
            <Route path="/themes/:themeId/layouts/:layoutId/preview" element={<LayoutPreviewPage />} />
          </Routes>
        </main>
      </div>
    </Router>
  )
}

export default App