import React from 'react';
import { t } from '@/i18n';
// Taro mini-program component

/**
 * 分享卡片组件
 *
 * 用于生成小程序分享图片/卡片
 * 包含券信息 + 品牌 + 价格 + 小程序码
 */

interface ShareCardProps {
  brand: string;
  name: string;
  price: string;
  faceValue: string;
  discount: string;
}

const ShareCard: React.FC<ShareCardProps> = ({
  brand, name, price, faceValue, discount,
}) => {
  return (
    <view className="share-card">
      {/* Header */}
      <view className="share-header">
        <view className="share-logo">
          <text className="share-logo-text">G</text>
        </view>
        <text className="share-brand">Genex · {brand}</text>
      </view>

      {/* Coupon Info */}
      <view className="share-body">
        <text className="share-name">{name}</text>
        <view className="share-price-row">
          <text className="share-price">{price}</text>
          <text className="share-face">{faceValue}</text>
          <view className="share-discount">
            <text className="share-discount-text">{discount}</text>
          </view>
        </view>
      </view>

      {/* Footer with QR */}
      <view className="share-footer">
        <view className="share-qr">
          <text className="share-qr-placeholder">{t('share_miniapp_code')}</text>
        </view>
        <view className="share-cta">
          <text className="share-cta-title">{t('share_scan_miniapp')}</text>
          <text className="share-cta-desc">{t('share_buy_coupons')}</text>
        </view>
      </view>
    </view>
  );
};

export default ShareCard;

/*
CSS:

.share-card {
  width: 560rpx; background: white;
  border-radius: 24rpx; overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.1);
}
.share-header {
  display: flex; align-items: center;
  padding: 24rpx 28rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
}
.share-logo {
  width: 48rpx; height: 48rpx; background: rgba(255,255,255,0.2);
  border-radius: 10rpx; display: flex;
  align-items: center; justify-content: center;
}
.share-logo-text { color: white; font-weight: 700; font-size: 24rpx; }
.share-brand { color: white; font-size: 26rpx; font-weight: 600; margin-left: 12rpx; }

.share-body { padding: 28rpx; }
.share-name { font-size: 32rpx; font-weight: 600; color: #141723; }
.share-price-row { display: flex; align-items: flex-end; margin-top: 16rpx; }
.share-price { font-size: 40rpx; font-weight: 700; color: #6C5CE7; }
.share-face { font-size: 24rpx; color: #A0A8BE; text-decoration: line-through; margin-left: 12rpx; }
.share-discount {
  margin-left: 12rpx; padding: 4rpx 12rpx;
  background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
  border-radius: 999rpx;
}
.share-discount-text { color: white; font-size: 22rpx; font-weight: 700; }

.share-footer {
  display: flex; align-items: center;
  padding: 20rpx 28rpx; border-top: 1rpx solid #F1F3F8;
}
.share-qr {
  width: 80rpx; height: 80rpx; background: #F3F1FF;
  border-radius: 8rpx; display: flex;
  align-items: center; justify-content: center;
}
.share-qr-placeholder { font-size: 16rpx; color: #A0A8BE; }
.share-cta { margin-left: 16rpx; }
.share-cta-title { font-size: 24rpx; font-weight: 600; color: #141723; }
.share-cta-desc { font-size: 20rpx; color: #A0A8BE; }
*/