import { View } from '@tarojs/components'
import GoodsCard, { GoodsData } from '../goods-card'
import './index.css'

export interface GoodsListProps {
  goodsList: GoodsData[]
  id?: string
  thresholds?: any[]
  onClick?: (goods: GoodsData, index: number) => void
  onAddCart?: (goods: GoodsData, index: number) => void
}

export default function GoodsList({
  goodsList = [],
  id,
  thresholds = [],
  onClick,
  onAddCart
}: GoodsListProps) {
  const independentID = id || `goods-list-${Math.floor(Math.random() * 10 ** 8)}`

  const handleGoodsClick = (goods: GoodsData, index: number) => {
    onClick?.(goods, index)
  }

  const handleAddCart = (goods: GoodsData, index: number) => {
    onAddCart?.(goods, index)
  }


  return (
    <View
      id={independentID}
      className="goods-list-wrap"
    >
      {goodsList.map((item, index) => (
        <GoodsCard
          key={item.id || index}
          id={`${independentID}-gd-${index}`}
          data={item}
          currency={'¥'}
          onClick={() => handleGoodsClick(item, index)}
          onAddCart={() => handleAddCart(item, index)}
          // className="goods-card-inside"
        />
      ))}
    </View>
  )
}