import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import Price from '../Price'
import { isGuest } from '@/utils/auth'
import type { ShopGoods } from '@/api/shop/shopGoods/model'

interface ProductCardProps {
  product: ShopGoods
  onClick?: () => void
}

const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
  const handleClick = () => {
    if (onClick) {
      onClick()
      return
    }
    Taro.navigateTo({ url: `/pages/shop/product-detail?id=${product.goodsId}` })
  }

  return (
    <View className='bg-white rounded-lg overflow-hidden shadow-sm' onClick={handleClick}>
      <View className='w-full' style={{ paddingTop: '100%', position: 'relative' }}>
        <Image
          className='absolute top-0 left-0 w-full h-full'
          src={product.image || product.files || ''}
          mode='aspectFit'
          lazyLoad
          style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
        />
      </View>
      <View className='p-2'>
        <Text className='text-sm text-gray-800 line-clamp-2 leading-5'>
          {product.name || product.goodsName}
        </Text>
        <View className='flex items-end justify-between mt-2'>
          <View className='flex-1'>
            <Price price={product.price || '0'} size='small' loginMask />
            {product.salePrice && product.salePrice !== product.price && (
              isGuest() ? null : (
                <Text className='text-xs text-gray-400 line-through ml-1'>
                  ¥{product.salePrice}
                </Text>
              )
            )}
          </View>
          {product.sales !== undefined && product.sales > 0 && (
            <Text className='text-xs text-gray-400'>
              已售{product.sales}
            </Text>
          )}
        </View>
      </View>
    </View>
  )
}

export default ProductCard