Untitled

import React from "react";
import { View, ScrollView, Image, Text, TouchableOpacity } from "react-native";
import tw from "twrnc";

const ProductList = ({ products }) => {
  return (
    <ScrollView contentContainerStyle={tw`px-6 py-4`}>
      <View style={tw`flex flex-wrap flex-row justify-between`}>
        {products.map((item) => (
          <View key={item.id} style={tw`w-[48%] bg-white py-4 rounded-lg mb-4`}>
            <Image
              source={item.image}
              style={tw`w-full h-[166px] rounded-lg`}
              resizeMode="cover"
            />
            <View style={tw`flex-row items-center mt-2`}>
              <Image source={item.profilImg} style={tw`w-4 h-4 rounded-full`} />
              <Text style={tw`text-sm text-[#888] ml-2`}>{item.name}</Text>
              <Image source={item.clickImg} style={tw`w-4 h-4 rounded-lg ml-2`} />
            </View>
            <Text style={tw`text-sm font-bold mt-1`}>{item.title}</Text>
            <View style={tw`flex-row justify-between items-center mt-2`}>
              <View style={tw`flex-row items-center`}>
                <Image source={item.currencyImg} style={tw`w-4 h-4`} />
                <Text style={tw`text-yellow-500 font-bold ml-1`}>{item.price}</Text>
              </View>
              <TouchableOpacity>
                <Image source={item.heartImg} style={tw`w-4 h-4 mr-1`} />
              </TouchableOpacity>
            </View>
          </View>
        ))}
      </View>
    </ScrollView>
  );
};

export default ProductList;