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

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="coupon-list-container">
        {title && (
          <View className="coupon-list-title">{title}</View>
        )}

        {coupons.length === 0 ? (
          showEmpty && (
            <View className="coupon-list-empty">
              {emptyText}
            </View>
          )
        ) : (
          <View className="coupon-list-content">
            {coupons.map((coupon, index) => (
              <View
                key={index}
                className="coupon-list-item"
                onClick={() => handleCouponClick(coupon, index)}
              >
                <CouponCard {...coupon} />
              </View>
            ))}
          </View>
        )}
      </View>
    )
  }

  // 水平滚动布局
  return (
    <View className="coupon-horizontal-container">
      {title && (
        <View className="coupon-horizontal-title">
          {title}
        </View>
      )}

      {coupons.length === 0 ? (
        showEmpty && (
          <View className="coupon-list-empty">
            {emptyText}
          </View>
        )
      ) : (
        <ScrollView
          scrollX
          className="coupon-horizontal-scroll flex overflow-x-auto"
          showScrollbar={false}
        >
          {coupons.map((coupon, index) => (
            <View
              key={index}
              className="coupon-horizontal-item"
              onClick={() => handleCouponClick(coupon, index)}
            >
              <CouponCard {...coupon} />
            </View>
          ))}
        </ScrollView>
      )}
    </View>
  )
}

export default CouponList
