import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ThemeProvider } from './context/ThemeContext';
import Navbar from './components/Navbar';
import ScrollToTop from './components/ScrollToTop';
import Dashboard from './pages/Dashboard';
import Plants from './pages/Plants';
import PlantDetail from './pages/PlantDetail';
import Surveys from './pages/Surveys';
import SurveyDetail from './pages/SurveyDetail';
import Search from './pages/Search';
import Statistics from './pages/Statistics';
import Informants from './pages/Informants';
import Locations from './pages/Locations';
import About from './pages/About';

function App() {
  return (
    <ThemeProvider>
      <Router>
        <div className="min-h-screen transition-colors duration-300">
          <Navbar />
          <main className="container mx-auto px-4 py-8">
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/plants" element={<Plants />} />
              <Route path="/plants/:id" element={<PlantDetail />} />
              <Route path="/surveys" element={<Surveys />} />
              <Route path="/surveys/:id" element={<SurveyDetail />} />
              <Route path="/search" element={<Search />} />
              <Route path="/statistics" element={<Statistics />} />
              <Route path="/informants" element={<Informants />} />
              <Route path="/locations" element={<Locations />} />
              <Route path="/about" element={<About />} />
            </Routes>
          </main>
          <ScrollToTop />
        </div>
      </Router>
    </ThemeProvider>
  );
}

export default App;