How to fetch fake data in React JSX

import { useState, useEffect } from "react";
import { products } from "../../data/products.js";
import { useNavigate } from "react-router-dom";
import "../profile/profile.css";
import ProductCard from "../../components/productCard/productCard.jsx";
import Cow from "../../assets/cow.svg";

export default function Profile() {
  const [user, setUser] = useState(null);
  const [orders, setOrders] = useState([]);
  const [loading, setLoading] = useState(true);
  const [currentIndex, setCurrentIndex] = useState(0);
  const navigate = useNavigate();

  // Profile data states
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");

  const nextSlide = () => {
    setCurrentIndex((prev) => (prev + 2 >= products.length ? 0 : prev + 2));
  };

  const prevSlide = () => {
    setCurrentIndex((prev) => {
      if (prev === 0) {
        return products.length % 2 === 0 ? products.length - 2 : products.length - 1;
      }
      return prev - 2;
    });
  };

  const handleAddToBasket = (product) => {
    console.log("Added to basket:", product.name);
  };

  useEffect(() => {
    const storedUserId = localStorage.getItem("userId");

    if (!storedUserId) {
      setLoading(false);
      return;
    }

    fetch(`/api/user/profile?userId=${storedUserId}`)
      .then((res) => res.json())
      .then((data) => {
        if (data.success) {
          setUser(data.user);
          // Sync internal states with DB data
          setFirstName(data.user.firstName || "");
          setLastName(data.user.lastName || "");
          setEmail(data.user.email || "");
          setPhone(data.user.phone || "");
        }
      })
      .catch((err) => console.error("Fetch error:", err))
      .finally(() => setLoading(false));

    // Placeholder for orders
    setOrders([{ id: 101, status: "delivered", total_price: 25.5, created_at: "2026-03-19" }]);
  }, []);

  if (loading) return <div className="loader"><p>Loading profile...</p></div>;

  if (!user) return (
    <div className="login-notice">
      <p>Please log in to view your profile.</p>
      <button onClick={() => navigate("/login")}>Go to Login</button>
    </div>
  );

  return (
    <div className="profilePage">
      <div className="topSection">
        <div className="welcomeBox">
          <h2>Welcome {user.firstName}!</h2>
          <p className="welcomeDesc">Recommended products for you</p>

          <div className="carouselContainer">
            <button className="carouselArrow" onClick={prevSlide}>❮</button>
            <div className="carouselWrapper">
              {products.slice(currentIndex, currentIndex + 2).map((product) => (
                <ProductCard 
                  key={product.id}
                  product={product} 
                  onAdd={handleAddToBasket} 
                />
              ))}
            </div>
            <button className="carouselArrow" onClick={nextSlide}>❯</button>
          </div>
        </div>

        <div className="mainLoyalBox">
          <h3 className="loyalTitle">Loyalty Card</h3>

          <div className="loyaltyBox">
            <div className="loyalLeft">
              {/* Uses real DB points, fallback to 400 only if undefined/null */}
              <h2 className="points">{user.userPoints ?? 400} Points</h2>
              <p className="loyalDesc">Points are added when you shop online</p>

              <div className="progressWrapper">
                <h3 className="rewardText">Next Reward:</h3>
                <p className="progressText">1000 points: 50% Discount</p>
                <button className="continueShopBtn" onClick={() => navigate("/products")}>
                  Continue Shopping
                </button>
              </div>
            </div>

            <div className="loyalRight">
              <img src={Cow} alt="Loyalty Mascot" />
            </div>
          </div>
        </div>
      </div>

      <div className="bottomSection">
        <div className="banner">
          <div className="bannerRight">
            <div className="bannerRightTop">
              <h2>Shop with our best deals</h2>
            </div>
            <div className="bannerRightBottom">

            </div>
          </div>
          <div className="bannerLeft"></div>
        </div>
      </div>
    </div>
  );
}