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 BestDeals = ({ product }) => {
  const navigation = useNavigation();

  const cat = [
    "https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-08-57-885-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-00-222-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-03-056-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-01-689-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-02-255-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-06-540-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-05-217-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-08-59-121-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/04/Ship-building-Logistics-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/04/Aggregates-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-01-102-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/04/Travel-Tours-150x150.png",
    "https://obanana.com/wp-content/uploads/2022/08/health-vector-150x150.png",
  ];
  return (
    <View style={styles.container}>
      <Text style={styles.header}>BEST DEALS!</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: "#ffaa00",
                      fontSize: 13,
                      flexWrap: "wrap",
                      fontWeight: "600",
                      overflow: "hidden",
                      paddingHorizontal: 10,

                      // paddingBottom:10
                    }}
                  >
                    {
                      item.regular_price ? "₱"+ parseFloat(item.regular_price)?.toLocaleString('en-US'):"Inquire for price"
                    }
                   
                  </Text>
                </View>
              </TouchableOpacity>
            );
          }}
        />
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    backgroundColor: "red",
    // alignItems: "center",
    // justifyContent: "center",
    width: "100%",
    // marginHorizontal: 10,
    marginBottom: 10,

    padding: 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 BestDeals;