import React from 'react'
import { View } from '@tarojs/components'
import GiftCard from './GiftCard'

const GiftCardExample: React.FC = () => {
  // 示例数据
  const giftCardData = {
    id: 1,
    name: '星巴克咖啡礼品卡',
    description: '享受醇香咖啡时光，适用于全国星巴克门店',
    code: 'SB2024001234567890',
    goodsImages: [
      'https://example.com/starbucks-card-1.jpg',
      'https://example.com/starbucks-card-2.jpg',
      'https://example.com/starbucks-card-3.jpg'
    ],
    faceValue: '100',
    originalPrice: '120',
    type: 20, // 虚拟礼品卡
    useStatus: 0, // 可用
    expireTime: '2024-12-31 23:59:59',
    contactInfo: '400-800-8888',
    goodsInfo: {
      brand: '星巴克',
      specification: '电子礼品卡',
      category: '餐饮美食',
      stock: 999,
      rating: 4.8,
      reviewCount: 1256,
      tags: ['热门', '全国通用', '无需预约', '即买即用'],
      instructions: [
        '出示兑换码至门店收银台即可使用',
        '可用于购买任意饮品和食品',
        '不可兑换现金，不设找零',
        '单次可使用多张礼品卡'
      ],
      notices: [
        '礼品卡一经售出，不可退换',
        '请妥善保管兑换码，遗失不补',
        '部分特殊商品可能不适用',
        '具体使用规则以门店公告为准'
      ],
      applicableStores: [
        '全国星巴克门店',
        '机场店',
        '高铁站店',
        '商场店'
      ]
    },
    promotionInfo: {
      type: 'discount' as const,
      description: '限时优惠：满100减20，买2张送1张咖啡券',
      amount: '20',
      validUntil: '2024-09-30 23:59:59'
    },
    showCode: true,
    showUseBtn: true,
    showDetailBtn: true,
    showGoodsDetail: true,
    theme: 'green' as const
  }

  const handleUse = () => {
    console.log('使用礼品卡')
  }

  const handleDetail = () => {
    console.log('查看详情')
  }

  const handleClick = () => {
    console.log('点击礼品卡')
  }

  return (
    <View className="gift-card-example">
      <GiftCard
        {...giftCardData}
        onUse={handleUse}
        onDetail={handleDetail}
        onClick={handleClick}
      />

      {/* 简化版本示例 */}
      <GiftCard
        id={2}
        name="麦当劳优惠券"
        description="美味汉堡套餐，限时优惠"
        goodsImage="https://example.com/mcd-card.jpg"
        faceValue="50"
        originalPrice="60"
        type={20}
        useStatus={0}
        expireTime="2024-10-31 23:59:59"
        goodsInfo={{
          brand: '麦当劳',
          category: '快餐',
          rating: 4.5,
          reviewCount: 892,
          tags: ['快餐', '全国通用']
        }}
        showCode={false}
        showUseBtn={true}
        showDetailBtn={true}
        showGoodsDetail={false}
        theme="blue"
        onUse={handleUse}
        onDetail={handleDetail}
        onClick={handleClick}
      />

      {/* 已使用状态示例 */}
      <GiftCard
        id={3}
        name="海底捞火锅券"
        description="享受正宗川味火锅"
        goodsImage="https://example.com/haidilao-card.jpg"
        faceValue="200"
        type={30}
        useStatus={1}
        takeTime="2024-08-15 19:30:00"
        useLocation="海底捞王府井店"
        goodsInfo={{
          brand: '海底捞',
          category: '火锅',
          rating: 4.9,
          reviewCount: 2341
        }}
        showCode={false}
        showUseBtn={false}
        showDetailBtn={true}
        theme="gold"
        onDetail={handleDetail}
        onClick={handleClick}
      />
    </View>
  )
}

export default GiftCardExample