App.js

import React, { useContext } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import Navbar from "./components/Navbar"; // ✅ Ensure Navbar is imported
import Home from "./pages/Home";
import Categories from "./pages/Categories";
import Products from "./pages/Products";
import SkincareProducts from "./pages/SkincareProducts";
import LifestyleProducts from "./pages/LifestyleProducts"; // ✅ Ensure LifestyleProducts is imported
import Payment from "./pages/Payment";
import FeaturedProducts from "./pages/FeaturedProducts"; // ✅ Import FeaturedProducts
import Login from "./pages/Login";
import Cart from "./pages/Cart"; // ✅ FIXED: Import Cart
import { AuthContext } from "./context/AuthContext";

// ✅ Protected Route (Prevents unauthorized access)
const ProtectedRoute = ({ element }) => {
  const { user } = useContext(AuthContext);
  return user ? element : <Navigate to="/login" />;
};

const App = () => {
  return (
    <>
      <Navbar /> {/* ✅ Navbar is included */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/categories" element={<Categories />} />
        <Route path="/products" element={<Products />} />
        <Route path="/skincare-products" element={<SkincareProducts />} />
        <Route path="/lifestyle-products" element={<LifestyleProducts />} /> {/* ✅ Ensure Route is Correct */}
        <Route path="/cart" element={<ProtectedRoute element={<Cart />} />} />
        <Route path="/payment" element={<ProtectedRoute element={<Payment />} />} />
        <Route path="/featured-products" element={<FeaturedProducts />} /> {/* ✅ FeaturedProducts Route */}
        <Route path="/login" element={<Login />} />
      </Routes>
    </>
  );
};

export default App;