import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import Header from './components/findagram/Header';
import Footer from './components/findagram/Footer';
import AuthModal from './components/findagram/AuthModal';

// Pages
import Home from './pages/findagram/Home';
import Products from './pages/findagram/Products';
import ProductDetail from './pages/findagram/ProductDetail';
import Deals from './pages/findagram/Deals';
import Brands from './pages/findagram/Brands';
import BrandDetail from './pages/findagram/BrandDetail';
import Categories from './pages/findagram/Categories';
import CategoryDetail from './pages/findagram/CategoryDetail';
import DispensaryDetail from './pages/findagram/DispensaryDetail';
import About from './pages/findagram/About';
import Contact from './pages/findagram/Contact';
import Login from './pages/findagram/Login';
import Signup from './pages/findagram/Signup';
import Dashboard from './pages/findagram/Dashboard';
import Favorites from './pages/findagram/Favorites';
import Alerts from './pages/findagram/Alerts';
import SavedSearches from './pages/findagram/SavedSearches';
import Profile from './pages/findagram/Profile';

function App() {
  return (
    <AuthProvider>
      <Router>
        <div className="flex flex-col min-h-screen">
          <Header />

        <main className="flex-grow">
          <Routes>
            {/* Public Routes */}
            <Route path="/" element={<Home />} />
            <Route path="/products" element={<Products />} />
            <Route path="/products/:id" element={<ProductDetail />} />
            <Route path="/deals" element={<Deals />} />
            <Route path="/brands" element={<Brands />} />
            <Route path="/brands/:slug" element={<BrandDetail />} />
            <Route path="/categories" element={<Categories />} />
            <Route path="/categories/:slug" element={<CategoryDetail />} />
            <Route path="/dispensaries/:slug" element={<DispensaryDetail />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />

            {/* Auth Routes */}
            <Route path="/login" element={<Login />} />
            <Route path="/signup" element={<Signup />} />

            {/* Dashboard Routes */}
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/dashboard/favorites" element={<Favorites />} />
            <Route path="/dashboard/alerts" element={<Alerts />} />
            <Route path="/dashboard/searches" element={<SavedSearches />} />
            <Route path="/dashboard/settings" element={<Profile />} />
          </Routes>
        </main>

          <Footer />
          <AuthModal />
        </div>
      </Router>
    </AuthProvider>
  );
}

export default App;