filter price + add wishi list or remove wish list

src/components/ProductCard.tsx

@@ -2,7 +2,8 @@ import { IProduct } from '@/types/landing.types'
 import { NumberFormat } from '@/config/func'
 import { Heart } from 'iconsax-react'
 import Image from 'next/image'
-import { FC } from 'react'
+import { FC, useState } from 'react'
+import { useAddWishlist, useRemoveWishlist } from '@/app/products/hooks/useProductsData'
 
 type Props = {
     item?: IProduct
@@ -10,6 +11,25 @@ type Props = {
 
 
 const ProductCard: FC<Props> = ({ item }) => {
+
+    const [isWished, setIsWished] = useState(item?.isWishlist)
+
+    const { mutate: addWishlist } = useAddWishlist()
+    const { mutate: removeWishlist } = useRemoveWishlist()
+
+
+    const handleWish = () => {
+        if (!item?._id || !item?.variants[0]?._id) return
+
+        if (isWished) {
+            removeWishlist({ productId: item._id.toString(), variantId: item.variants[0]._id })
+            setIsWished(false)
+        } else {
+            addWishlist({ productId: item._id.toString(), variantId: item.variants[0]._id })
+            setIsWished(true)
+        }
+    }
+
     if (item) return (
         <div className='bg-white rounded-[20px] sm:rounded-[40px] p-4 sm:p-6 w-full max-w-[240px] sm:max-w-[280px] mx-auto shadow'>
             <div className='flex justify-center'>
@@ -64,7 +84,7 @@ const ProductCard: FC<Props> = ({ item }) => {
             </div>
 
             <div className='flex justify-end'>
-                <Heart size={20} color='#000' />
+                <Heart onClick={handleWish} variant={isWished ? 'Bold' : 'Outline'} size={20} color='#000' />
             </div>
         </div>
     )