import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { BlogContextProvider } from './context/BlogContext';
import Header from './components/Header';
import TopicSelectionPage from './pages/TopicSelectionPage';
import BlogPlanPage from './pages/BlogPlanPage';
import BlogContentPage from './pages/BlogContentPage';
import SavedTopicsPage from './pages/SavedTopicsPage';
import './styles/main.css';

function App() {
  return (
    <BlogContextProvider>
      <Router>
        <div className="app-container">
          <Header />
          <main className="main-content">
            <Routes>
              <Route path="/" element={<TopicSelectionPage />} />
              <Route path="/plan" element={<BlogPlanPage />} />
              <Route path="/content" element={<BlogContentPage />} />
              <Route path="/saved" element={<SavedTopicsPage />} />
            </Routes>
          </main>
        </div>
      </Router>
    </BlogContextProvider>
  );
}

export default App;