import React from 'react';
// Taro mini-program component

/**
 * 通用券卡片组件（小程序/H5版）
 *
 * 券图标 + 品牌 + 名称 + 价格 + 折扣标签
 * 可复用于首页、搜索结果、我的券等场景
 */

interface CouponCardProps {
  brand: string;
  name: string;
  price: string;
  faceValue: string;
  discount: string;
  creditRating?: string;
  onClick?: () => void;
}

const CouponCard: React.FC<CouponCardProps> = ({
  brand, name, price, faceValue, discount, creditRating, onClick,
}) => {
  return (
    <view className="coupon-card-component" onClick={onClick}>
      <view className="cc-image">
        <text className="cc-image-icon">🎫</text>
      </view>
      <view className="cc-info">
        <view className="cc-top-row">
          <text className="cc-brand">{brand}</text>
          {creditRating && (
            <view className="cc-credit">
              <text className="cc-credit-text">{creditRating}</text>
            </view>
          )}
        </view>
        <text className="cc-name">{name}</text>
        <view className="cc-price-row">
          <text className="cc-price">{price}</text>
          <text className="cc-face">{faceValue}</text>
          <view className="cc-discount">
            <text className="cc-discount-text">{discount}</text>
          </view>
        </view>
      </view>
    </view>
  );
};

export default CouponCard;

/*
CSS:

.coupon-card-component {
  display: flex; padding: 20rpx;
  background: white; border-radius: 16rpx;
  border: 1rpx solid #F1F3F8;
  margin-bottom: 16rpx;
}
.cc-image {
  width: 160rpx; height: 160rpx;
  background: #F3F1FF; border-radius: 12rpx;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cc-image-icon { font-size: 48rpx; }
.cc-info {
  flex: 1; padding-left: 20rpx;
  display: flex; flex-direction: column; justify-content: space-between;
}
.cc-top-row { display: flex; align-items: center; }
.cc-brand { font-size: 22rpx; color: #A0A8BE; }
.cc-credit {
  margin-left: 8rpx; padding: 0 8rpx;
  background: #EFF6FF; border-radius: 999rpx;
}
.cc-credit-text { font-size: 18rpx; color: #3B82F6; font-weight: 600; }
.cc-name { font-size: 28rpx; font-weight: 500; color: #141723; margin-top: 8rpx; }
.cc-price-row { display: flex; align-items: flex-end; margin-top: 8rpx; }
.cc-price { font-size: 32rpx; font-weight: 700; color: #6C5CE7; }
.cc-face { font-size: 22rpx; color: #A0A8BE; text-decoration: line-through; margin-left: 8rpx; }
.cc-discount {
  margin-left: 8rpx; padding: 2rpx 10rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  border-radius: 999rpx;
}
.cc-discount-text { color: white; font-size: 20rpx; font-weight: 700; }
*/
