import React from "react";
import { View, Text, StyleSheet } from "react-native";
import CartSubCard from "./CartSubCard";
import MasonryList from "@react-native-seoul/masonry-list";

const CartCard = ({ cart }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>{cart?.shopname}</Text>
      <MasonryList
        data={cart?.cartItems}
        keyExtractor={(item) => item.id}
        style={styles.list}
        numColumns={1}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => <CartSubCard cart={item} />}
        containerStyle={styles.container1}
        contentContainerStyle={styles.content}
        onEndReachedThreshold={0.1}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    // width: "95%",
    margin: 5,
    borderRadius: 6,
    borderColor: "#dddd",
    borderWidth: 1,
    overflow: "hidden",

    padding: 10,
    backgroundColor:'#fafafa'
  },

  header: {
    // position: "fixed",
    fontWeight: "600",
    width: "100%",
    top: 0,
  },
  footer: {
    // position: "absolute",
    bottom: 0,
    width: "100%",
  },
  wrapper: {
    height: "85%",
  },
});

export default CartCard;