template-10550/src/components/CouponList.tsx

import React from 'react'
import { View, ScrollView } from '@tarojs/components'
import CouponCard, { CouponCardProps } from './CouponCard'

export interface CouponListProps {
  /** 优惠券列表数据 */
  coupons: CouponCardProps[]
  /** 列表标题 */
  title?: string
  /** 布局方式：vertical-垂直布局 horizontal-水平滚动 */
  layout?: 'vertical' | 'horizontal'
  /** 是否显示空状态 */
  showEmpty?: boolean
  /** 空状态文案 */
  emptyText?: string
  /** 优惠券点击事件 */
  onCouponClick?: (coupon: CouponCardProps, index: number) => void
}

const CouponList: React.FC<CouponListProps> = ({
  coupons = [],
  title,
  layout = 'vertical',
  showEmpty = true,
  emptyText = '暂无优惠券',
  onCouponClick
}) => {
  const handleCouponClick = (coupon: CouponCardProps, index: number) => {
    onCouponClick?.(coupon, index)
  }

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

        {coupons.length === 0 ? (
          showEmpty && (
            <View className="text-center py-10 px-5 text-gray-500 text-sm">
              {emptyText}
            </View>
          )
        ) : (
          coupons.map((coupon, index) => (
            <View
              key={index}
              onClick={() => handleCouponClick(coupon, index)}
            >
              <CouponCard {...coupon} />
            </View>
          ))
        )}
      </View>
    )
  }

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

      {coupons.length === 0 ? (
        showEmpty && (
          <View className="text-center py-10 px-5 text-gray-500 text-sm">
            {emptyText}
          </View>
        )
      ) : (
        <ScrollView
          scrollX
          className="flex p-4 gap-2 overflow-x-auto"
          showScrollbar={false}
          style={{
            WebkitOverflowScrolling: 'touch'
          }}
        >
          {coupons.map((coupon, index) => (
            <View
              key={index}
              className="flex-shrink-0 w-60 mb-0"
              onClick={() => handleCouponClick(coupon, index)}
            >
              <CouponCard {...coupon} />
            </View>
          ))}
        </ScrollView>
      )}
    </View>
  )
}

export default CouponList