mp-10550/src/components/GiftCardList.tsx

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

export interface GiftCardListProps {
  /** 礼品卡列表数据 */
  gifts: GiftCardProps[]
  /** 列表标题 */
  title?: string
  /** 布局方式：vertical-垂直布局 horizontal-水平滚动 grid-网格布局 */
  layout?: 'vertical' | 'horizontal' | 'grid'
  /** 网格列数（仅在grid布局时有效） */
  columns?: number
  /** 是否显示空状态 */
  showEmpty?: boolean
  /** 空状态文案 */
  emptyText?: string
  /** 礼品卡点击事件 */
  onGiftClick?: (gift: GiftCardProps, index: number) => void
  /** 礼品卡使用事件 */
  onGiftUse?: (gift: GiftCardProps, index: number) => void
  /** 礼品卡详情事件 */
  onGiftDetail?: (gift: GiftCardProps, index: number) => void
}

const GiftCardList: React.FC<GiftCardListProps> = ({
  gifts = [],
  title,
  layout = 'vertical',
  columns = 2,
  showEmpty = true,
  emptyText = '暂无礼品卡',
  onGiftClick,
  onGiftUse,
  onGiftDetail
}) => {
  const handleGiftClick = (gift: GiftCardProps, index: number) => {
    onGiftClick?.(gift, index)
  }

  const handleGiftUse = (gift: GiftCardProps, index: number) => {
    onGiftUse?.(gift, index)
  }

  const handleGiftDetail = (gift: GiftCardProps, index: number) => {
    onGiftDetail?.(gift, index)
  }

  // 垂直布局
  if (layout === 'vertical') {
    return (
      <View className="p-4">
        {title && (
          <View className="font-semibold text-gray-800 mb-4 text-lg">{title}</View>
        )}

        {gifts.length === 0 ? (
          showEmpty && (
            <View className="text-center py-16 px-5">
              <View className="text-gray-400 mb-4">
                <View className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center">
                  <View className="text-2xl">🎁</View>
                </View>
              </View>
              <View className="text-gray-500 text-base">{emptyText}</View>
            </View>
          )
        ) : (
          gifts.map((gift, index) => (
            <>
              <GiftCard
                key={gift.id || index}
                {...gift}
                onClick={() => handleGiftClick(gift, index)}
                onUse={() => handleGiftUse(gift, index)}
                onDetail={() => handleGiftDetail(gift, index)}
              />
            </>
          ))
        )}
      </View>
    )
  }

  // 网格布局
  if (layout === 'grid') {
    return (
      <View className="p-4">
        {title && (
          <View className="font-semibold text-gray-800 mb-4 text-lg">{title}</View>
        )}

        {gifts.length === 0 ? (
          showEmpty && (
            <View className="text-center py-16 px-5">
              <View className="text-gray-400 mb-4">
                <View className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center">
                  <View className="text-2xl">🎁</View>
                </View>
              </View>
              <View className="text-gray-500 text-base">{emptyText}</View>
            </View>
          )
        ) : (
          <View
            className="flex flex-wrap"
            style={{gap: '12px'}}
          >
            {gifts.map((gift, index) => (
              <View
                key={gift.id || index}
                className="w-full"
                style={{width: `calc(${100/columns}% - ${12*(columns-1)/columns}px)`}}
              >
                <GiftCard
                  {...gift}
                  onClick={() => handleGiftClick(gift, index)}
                  onUse={() => handleGiftUse(gift, index)}
                  onDetail={() => handleGiftDetail(gift, index)}
                />
              </View>
            ))}
          </View>
        )}
      </View>
    )
  }

  // 水平滚动布局
  return (
    <View>
      {title && (
        <View className="font-semibold text-gray-800 mb-4 pl-4 text-lg">
          {title}
        </View>
      )}

      {gifts.length === 0 ? (
        showEmpty && (
          <View className="text-center py-16 px-5">
            <View className="text-gray-400 mb-4">
              <View className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center">
                <View className="text-2xl">🎁</View>
              </View>
            </View>
            <View className="text-gray-500 text-base">{emptyText}</View>
          </View>
        )
      ) : (
        <ScrollView
          scrollX
          className="flex p-4 gap-3 overflow-x-auto"
          showScrollbar={false}
          style={{}}
        >
          {gifts.map((gift, index) => (
            <View
              key={gift.id || index}
              className="flex-shrink-0 w-80 mb-0"
            >
              <GiftCard
                {...gift}
                onClick={() => handleGiftClick(gift, index)}
                onUse={() => handleGiftUse(gift, index)}
                onDetail={() => handleGiftDetail(gift, index)}
              />
            </View>
          ))}
        </ScrollView>
      )}
    </View>
  )
}

export default GiftCardList