category , subcategory, product url changes

components/common-components/FaqCard.jsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import {
   Accordion,
   AccordionContent,
@@ -10,10 +10,13 @@ import {
 import Link from "next/link";
 import axios from "axios";
 import { backendUrl } from "@/utils/axios";
+import slugify from "slugify";
+import ProductContext from "@/app/contexts/productContext";
 
-const DEFAULT_IMAGE = "/sidhi-mala/Designer_30.png"; // Default image
+const DEFAULT_IMAGE = "/sidhi-mala/Designer_30.png";
 
 const FaqCard = ({ params }) => {
+  const { products } = useContext(ProductContext); // ✅ get products
   const [faq, setFaq] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -21,11 +24,46 @@ const FaqCard = ({ params }) => {
   useEffect(() => {
     const fetchFaq = async () => {
       try {
-        const response = await axios.get(
-          `${backendUrl}/products/faq/${params.id}/`
+        if (!products || products.length === 0) {
+          console.log("❌ Products not loaded yet.");
+          return;
+        }
+
+        // 1️⃣ Collect all unique subcategories from products
+        const subcategories = products.map((p) => p.product_subcategory);
+
+        // 2️⃣ Find subcategory by slug
+        const matchedSub = subcategories.find(
+          (sub) =>
+            slugify(sub?.subcategory_name || "", { lower: true }) ===
+            params.subcategory
         );
-        setFaq(response.data);
+
+        console.log("✅ Matched Subcategory for FAQ:", matchedSub);
+
+        if (!matchedSub) {
+          console.warn("⚠️ No subcategory found for slug:", params.subcategory);
+          setError("Subcategory not found");
+          setLoading(false);
+          return;
+        }
+
+        // 3️⃣ Fetch FAQs using subcategory ID
+        const url = `${backendUrl}/products/faq/${matchedSub.category}/`;
+        console.log("📡 Fetching FAQ from:", url);
+
+        const faqRes = await axios.get(url);
+
+        console.log("📥 Full FAQ Response:", faqRes);
+        console.log("✅ FAQ Data:", faqRes.data);
+
+        setFaq(faqRes.data);
       } catch (err) {
+        console.error("❌ FAQ Fetch Error:", err);
+        if (err.response) {
+          console.error("⚠️ Response Status:", err.response.status);
+          console.error("⚠️ Response Data:", err.response.data);
+        }
         setError("Failed to fetch FAQs. Please try again later.");
       } finally {
         setLoading(false);
@@ -33,24 +71,19 @@ const FaqCard = ({ params }) => {
     };
 
     fetchFaq();
-  }, [params.id]);
+  }, [products, params.subcategory]);
 
-  if (loading) {
+  if (loading)
     return <p className="text-center text-xl mt-10">Loading FAQs...</p>;
-  }
-
-  if (error) {
-    return <p className="text-center text-red-600 mt-10">{error}</p>;
-  }
-
-  if (!faq || faq.length === 0) {
+  if (error) return <p className="text-center text-red-600 mt-10">{error}</p>;
+  if (!faq || faq.length === 0)
     return <p className="text-center text-xl mt-10">No FAQs available.</p>;
-  }
 
   const hasImage = faq.some((item) => item.image !== null);
   const imageToShow = hasImage
     ? `${backendUrl}${faq.find((item) => item.image !== null).image}`
     : DEFAULT_IMAGE;
+
   return (
     <div className="min-h-screen sm:block hidden bg-[#FFFFFF]">
       <h1 className="sm:pt-14 pb-8 font-serif mt-4 sm:text-6xl text-2xl text-zinc-800 text-center">