import React from 'react';
import { View, Text } from '@tarojs/components';
import type { PointsProduct } from '@/services/points';
import './index.scss';

interface ProductCardProps {
  product: PointsProduct;
  onPress?: (product: PointsProduct) => void;
}

const TYPE_BG_CLASS: Record<string, string> = {
  physical: 'product-card__thumb--physical',
  service: 'product-card__thumb--service',
  privilege: 'product-card__thumb--privilege',
};

const TYPE_LABELS: Record<string, string> = {
  physical: '实物',
  service: '服务券',
  privilege: '权益',
};

const ProductCard: React.FC<ProductCardProps> = ({ product, onPress }) => {
  const isSoldOut = product.stock <= 0;
  const isLowStock = product.stock > 0 && product.stock <= 10;

  return (
    <View
      className='product-card'
      onClick={() => onPress?.(product)}
    >
      <View className='product-card__thumb-wrap'>
        <View className={`product-card__thumb ${TYPE_BG_CLASS[product.product_type] || ''}`}>
          <Text className='product-card__thumb-type'>{TYPE_LABELS[product.product_type] || '商品'}</Text>
        </View>
        {isSoldOut && (
          <View className='product-card__soldout'>
            <Text className='product-card__soldout-text'>已兑完</Text>
          </View>
        )}
      </View>
      <View className='product-card__info'>
        <Text className='product-card__name'>{product.name}</Text>
        <View className='product-card__bottom'>
          <View className='product-card__points-row'>
            <Text className='product-card__points-num'>{product.points_cost}</Text>
            <Text className='product-card__points-unit'>积分</Text>
          </View>
        </View>
        {isLowStock && (
          <Text className='product-card__low-stock'>仅剩{product.stock}件</Text>
        )}
      </View>
    </View>
  );
};

export default React.memo(ProductCard);