import { GoodsItem } from '@/services/mall';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { GoodsCard } from './GoodsCard';

interface GoodsListProps {
  data: GoodsItem[];
  onItemPress?: (item: GoodsItem) => void;
}

export function GoodsList({ data, onItemPress }: GoodsListProps) {
  if (!data || data.length === 0) {
    return (
      <View style={styles.empty}>
        <Text style={styles.emptyText}>暂无商品</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      {data.map((item) => (
        <GoodsCard key={item.id} data={item} onPress={onItemPress} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginHorizontal: 7,
    marginTop: 10,
    paddingBottom: 100,
  },
  empty: {
    paddingVertical: 50,
    alignItems: 'center',
  },
  emptyText: {
    color: '#666',
    fontSize: 14,
  },
});