import React from "react";
import {
  FlatList,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import { products } from "../../../constants/product2";
import MasonryList from "@react-native-seoul/masonry-list";
import { useNavigation } from "@react-navigation/native";

const FeaturedProducts = ({ product }) => {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <Text style={styles.header}>FEATURED PRODUCTS</Text>
      <View style={{ flexDirection: "row" }}>
        <FlatList
          // inverted
          //   style={styles.wrapper}
          horizontal
          data={product ? product.slice(0, 10) : []}
          showsHorizontalScrollIndicator={false}
          renderItem={({ item }) => {
            return (
              <TouchableOpacity style={styles.AddUser}
      onPress={() => navigation.navigate("Product", { product:item })}
              
              >
                <View style={styles.AddUserV}>
                  <Image
                    style={styles.img}
                    source={{
                      uri:
                        item.product_image !== ""
                          ? item.product_image
                          : "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
                    }}
                  />
                  <Text
                    numberOfLines={1}
                    ellipsizeMode="tail"
                    style={{
                      color: "#000",
                      fontSize: 12,
                      flexWrap: "wrap",
                      overflow: "hidden",
                      paddingHorizontal:10
                      // paddingBottom:10
                    }}
                  >
                    {item.product_name}
                  </Text>
                </View>
              </TouchableOpacity>
            );
          }}
        />
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    backgroundColor: "#ffaa00",
    // alignItems: "center",
    // justifyContent: "center",
    width: "100%",
    // marginHorizontal: 10,
    padding: 10,
    marginBottom: 10,
    //   height: "87%",
  },
  wrapper: {
    width: "100%",
    height: 200,
    // backgroundColor: "#ffaa00",
  },
  header: {
    fontSize: 14,
    fontWeight: "700",
    textTransform: "uppercase",
    color: "#fff",
    marginBottom: 10,
  },
  AddUserV: {
    width: 110,
    height: 140,
    // padding: 10,
    margin: 5,
    backgroundColor: "#ffff",
    alignItems: "center",
    // borderRadius: 10,

    // justifyContent: "center",
  },
  img: {
    width: 110,
    height: 110,
    resizeMode: "cover",
    // borderRadius: 10,
    // marginVertical:10
    marginBottom: 8,
    // backgroundColor: "#ffaa00",
  },
});
export default FeaturedProducts;
