detail page connected to backend , modal form for one product connected to backend

components/pages/products/product/mianProduct.tsx

@@ -5,12 +5,14 @@ import { useQuery } from "@tanstack/react-query";
 import ProductCard from "./productCard";
 import { useCategory } from "@/store/useCategory";
 import { useFilter } from "@/lib/filter-zustand";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
+import { useProductPageInfo } from "@/store/useProduct";
 
 export default function MainProduct() {
   const category = useCategory((state) => state.category);
   const filter = useFilter((state) => state.filter);
-  const getFiltersByType = useFilter((state)=>state.getFiltersByType)
+  const getFiltersByType = useFilter((state) => state.getFiltersByType);
+  const setProduct = useProductPageInfo((state) => state.setProducts);
 
   // Query params yaratish
   const queryParams = useMemo(() => {
@@ -38,11 +40,19 @@ export default function MainProduct() {
   }, [category.id, category.have_sub_category, queryParams]);
 
   const { data, isLoading, error } = useQuery({
-    queryKey: ["products", category.id , queryParams],
+    queryKey: ["products", category.id, queryParams],
     queryFn: () => httpClient(requestLink),
-    select: (data) => data?.data?.data?.results,
+    select: (data) => {
+      const product = data?.data?.data?.results;
+      return product.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+        image: item.images[0].image,
+      }));
+    },
   });
 
+
   if (isLoading) {
     return (
       <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@@ -74,6 +84,7 @@ export default function MainProduct() {
       {data.map((item: any) => (
         <ProductCard
           key={item.id} // ✅ index o'rniga id ishlatish
+          getProduct={() => setProduct(item)}
           title={item.name}
           image={item.image}
           slug={item.slug}