fix filter with category id

src/components/listview/MenuItem.tsx

@@ -1,23 +1,14 @@
 'use client'
 
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import Image from "next/image";
 import PlusIcon from "@/components/icons/PlusIcon";
 import MinusIcon from "@/components/icons/MinusIcon";
 import { useReceiptStore } from "@/zustand/receiptStore";
 import { motion } from "framer-motion";
+import type { Food } from "@/app/[name]/(Main)/types/Types";
 interface MenuItemProps {
-  food: {
-    id: string | number;
-    name?: string;
-    title?: string;
-    foodName?: string;
-    description?: string;
-    desc?: string;
-    content?: string;
-    price: number;
-    image?: string;
-  };
+  food: Food;
 }
 
 const MenuItem = ({ food }: MenuItemProps) => {
@@ -26,7 +17,16 @@ const MenuItem = ({ food }: MenuItemProps) => {
   const increment = useReceiptStore(state => state.increment);
   const decrement = useReceiptStore(state => state.decrement);
 
-  if (!food) return null;
+  const fallbackImage = "/assets/images/food-preview.png";
+  const resolvedImage = useMemo(() => {
+    if (food.image) return food.image;
+    if (Array.isArray(food.images) && food.images.length > 0) {
+      const [firstImage] = food.images;
+      if (typeof firstImage === "string") return firstImage;
+      return firstImage?.url || fallbackImage;
+    }
+    return fallbackImage;
+  }, [food.image, food.images]);
 
   const foodName = food.name || food.title || food.foodName || 'بدون نام';
   const foodDescription = food.description || food.desc || food.content || '';
@@ -35,7 +35,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
     <div className="flex gap-4 w-full h-full">
       <Image
         className="rounded-xl w-28 h-28"
-        src={food.image || "/assets/images/food-preview.png"}
+        src={resolvedImage}
         height={100}
         width={100}
         alt="Food image"