import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import TrackerPage from './components/tracker/TrackerPage';
import StatsPage from './components/stats/StatsPage';
import Navbar from './components/Navbar';
import Playground from './components/Playground';
import Footer from './components/Footer';


function App() {
  return (
    <Router>
      <div className="min-h-screen bg-[#f8fafc] text-slate-900 font-sans antialiased">
        <Navbar />
        <main className="container mx-auto px-4 sm:px-6 lg:px-8 mt-8">
          <Routes>
            <Route path="/" element={<TrackerPage />} />
            <Route path="/stats" element={<StatsPage />} />
            <Route path="/playground" element={<Playground />} />
          </Routes>
        </main>
        <Footer />
      </div>
    </Router>
  );
}


export default App;