change food item type

src/components/listview/MenuItem.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
-'use client'
+"use client";
 
-import { memo, useMemo } from "react";
+import { useCart } from "@/app/[name]/(Dialogs)/cart/hook/useCart";
+import type { Food, FoodImage } from "@/app/[name]/(Main)/types/Types";
+import MinusIcon from "@/components/icons/MinusIcon";
+import PlusIcon from "@/components/icons/PlusIcon";
+import { motion } from "framer-motion";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import PlusIcon from "@/components/icons/PlusIcon";
-import MinusIcon from "@/components/icons/MinusIcon";
-import { useCart } from "@/app/[name]/(Dialogs)/cart/hook/useCart";
-import { motion } from "framer-motion";
-import type { Food, FoodImage } from "@/app/[name]/(Main)/types/Types";
+import { memo, useMemo } from "react";
 
 interface MenuItemProps {
   food: Food;
@@ -17,11 +17,11 @@ interface MenuItemProps {
 const MenuItem = ({ food }: MenuItemProps) => {
   const { items, addToCart, removeFromCart } = useCart();
   const params = useParams<{ name: string }>();
-  const name = params?.name || '';
+  const name = params?.name || "";
 
   const quantity = useMemo(() => {
     const item = items?.[food.id];
-    if (item && typeof item === 'object' && 'quantity' in item) {
+    if (item && typeof item === "object" && "quantity" in item) {
       return item.quantity || 0;
     }
     return 0;
@@ -29,7 +29,6 @@ const MenuItem = ({ food }: MenuItemProps) => {
 
   const fallbackImage = "/assets/images/no-image.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;
@@ -37,29 +36,28 @@ const MenuItem = ({ food }: MenuItemProps) => {
       return (typeof imageObj === "object" && imageObj?.url) || fallbackImage;
     }
     return fallbackImage;
-  }, [food.image, food.images]);
+  }, [food.images]);
 
-  const foodName = useMemo(
-    () => food.name || food.title || food.foodName || 'بدون نام',
-    [food.name, food.title, food.foodName]
-  );
+  const foodName = useMemo(() => food.title || "بدون نام", [food.title]);
 
   const foodContent = useMemo(() => {
     const content = food.content;
-    if (!content) return '';
+    if (!content) return "";
 
     if (Array.isArray(content)) {
-      return content.filter(item => item && typeof item === 'string').join('، ');
+      return content
+        .filter((item) => item && typeof item === "string")
+        .join("، ");
     }
 
-    return '';
+    return "";
   }, [food.content]);
 
   const foodDescription = useMemo(() => {
-    const desc = food.description || food.desc;
-    if (!desc || typeof desc !== 'string') return '';
-    return desc.replace(/,/g, '،');
-  }, [food.description, food.desc]);
+    const desc = food.desc;
+    if (!desc || typeof desc !== "string") return "";
+    return desc.replace(/,/g, "،");
+  }, [food.desc]);
 
   const finalPrice = useMemo(() => {
     const basePrice = food.price || 0;
@@ -71,19 +69,16 @@ const MenuItem = ({ food }: MenuItemProps) => {
   }, [food.price, food.discount]);
 
   const formattedPrice = useMemo(
-    () => (finalPrice ? finalPrice.toLocaleString('fa-IR') : '0'),
-    [finalPrice]
+    () => (finalPrice ? finalPrice.toLocaleString("fa-IR") : "0"),
+    [finalPrice],
   );
 
   const formattedOriginalPrice = useMemo(
-    () => (food.price ? food.price.toLocaleString('fa-IR') : '0'),
-    [food.price]
+    () => (food.price ? food.price.toLocaleString("fa-IR") : "0"),
+    [food.price],
   );
 
-  const hasDiscount = useMemo(
-    () => (food.discount || 0) > 0,
-    [food.discount]
-  );
+  const hasDiscount = useMemo(() => (food.discount || 0) > 0, [food.discount]);
 
   const handleAddToCart = () => {
     addToCart(food.id);
@@ -93,7 +88,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
     removeFromCart(food.id);
   };
 
-  const foodDetailUrl = `/${name}/${food.id}?category=${food.category.id}`;
+  const foodDetailUrl = `/${name}/${food.id}?category=${food.category}`;
 
   return (
     <div className="flex gap-4 w-full h-full items-center">
@@ -104,6 +99,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
           height={112}
           width={112}
           alt={foodName}
+          loading="lazy"
         />
       </Link>
       <div className="w-full inline-flex flex-col justify-between min-w-0">
@@ -144,7 +140,6 @@ const MenuItem = ({ food }: MenuItemProps) => {
               <button
                 onClick={handleAddToCart}
                 className="inline-flex w-full justify-center items-center gap-2"
-
               >
                 <PlusIcon />
                 <div className="text-sm2 pt-0.5 font-normal text-foreground">