shop-front/src/components/ProductCard.tsx

'use client'
import { IProduct } from '@/types/landing.types'
import { NumberFormat } from '@/config/func'
import { Heart } from 'iconsax-react'
import Image from 'next/image'
import { FC, useState } from 'react'
import { useAddWishlist, useRemoveWishlist } from '@/app/products/hooks/useProductsData'
import { useSharedStore } from '@/share/store/sharedStore'
import Link from 'next/link'

type Props = {
    item?: IProduct
}


const ProductCard: FC<Props> = ({ item }) => {

    const { isLogin } = useSharedStore()
    const [isWished, setIsWished] = useState(item?.isWishlist)

    const { mutate: addWishlist } = useAddWishlist()
    const { mutate: removeWishlist } = useRemoveWishlist()


    const handleWish = (e: React.MouseEvent) => {
        e.preventDefault()
        e.stopPropagation()

        if (!isLogin) return
        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 (
        <Link href={`/product/${item._id}`} className='bg-white block 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'>
                <Image
                    src={item.imagesUrl.cover}
                    width={170}
                    height={170}
                    alt=''
                    className='max-w-[120px] sm:max-w-[150px] max-h-[120px] sm:max-h-[150px] object-contain'
                />
            </div>

            <h4 className='line-clamp-2 text-[#383E43] mt-4 sm:mt-6 text-xs sm:text-sm text-center leading-4 sm:leading-5 h-10 sm:h-12'>
                {item.title_fa}
            </h4>
            {/* <div className='flex flex-wrap justify-end items-center gap-1.5 mt-4'>

                {
                    item.variants.map((variant) => {
                        if (variant.meterage) {
                            return <div className='text-[10px] px-4 border border-border rounded-lg whitespace-nowrap' key={variant._id}>{variant?.meterage?.value}</div>
                        }

                    })
                }
            </div>

            <div className='flex flex-wrap justify-end items-center gap-1.5 mt-4'>
                {
                    item.variants.map((variant) => {
                        if (variant.color) {
                            return <div className='text-[10px] px-4 border border-border rounded-lg whitespace-nowrap' key={variant._id}>
                                <div className='size-2 rounded-full' style={{ backgroundColor: variant?.color?.value }}></div>
                            </div>
                        }
                    })
                }
                {
                    item.variants.map((variant) => {
                        if (variant.size) {
                            return <div className='text-[10px] px-4 border border-border rounded-lg whitespace-nowrap' key={variant._id}>{variant?.size?.value}</div>
                        }
                    })
                }
            </div> */}

            <div className='mt-4 sm:mt-5 text-xs sm:text-sm'>
                {NumberFormat(item.default_variant.price.selling_price)} تومان
            </div>
            <div className='mt-1 text-xs sm:text-sm text-[#7F7F7F] line-through'>
                {NumberFormat(item.default_variant.price.retailPrice)}
            </div>

            <div className='flex justify-end'>
                <Heart onClick={handleWish} variant={isWished ? 'Bold' : 'Outline'} size={20} color='#000' />
            </div>
        </Link>
    )
    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'>
                <Image
                    src={`https://dkstatics-public.digikala.com/digikala-products/40026b18c2b053ac4a68c3288556dc899a77aecd_1727277566.jpg?x-oss-process=image/resize,m_lfit,h_300,w_300/format,webp/quality,q_80`}
                    width={170}
                    height={170}
                    alt=''
                    className='max-w-[120px] sm:max-w-[150px] max-h-[120px] sm:max-h-[150px] object-contain'
                />
            </div>

            <h4 className='line-clamp-2 text-[#383E43] mt-4 sm:mt-6 text-xs sm:text-sm text-center leading-4 sm:leading-5'>
                شارژر دیواری 65 وات سامسونگ سه پورت Type-C مدل EP-T6530- اورجینال
            </h4>

            <div className='flex justify-end items-center gap-1.5 mt-4'>
                <div className='size-2 rounded-full bg-red-500'></div>
                <div className='size-2 rounded-full bg-red-500'></div>
                <div className='size-2 rounded-full bg-red-500'></div>
            </div>

            <div className='mt-4 sm:mt-5 text-xs sm:text-sm'>
                260,000 تومان
            </div>
            <div className='mt-1 text-xs sm:text-sm text-[#7F7F7F] line-through'>
                70,400,000
            </div>

            <div className='flex justify-end'>
                <Heart size={20} color='#000' />
            </div>
        </div>
    )
}

export default ProductCard