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

const TopShops = ({ vendors }) => {
  const navigation = useNavigation();

  const cat = [
    "https://i.pinimg.com/564x/ca/8c/34/ca8c34e10eb890c49c3b6887064be2d8.jpg",
    "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}> TOP SHOPS</Text>
      <View style={{ flexDirection: "row", marginTop: 15 }}>
        <MasonryList
          horizontal
          data={vendors ? vendors.slice(-9, -1) : []}
          showsHorizontalScrollIndicator={false}
          renderItem={({ item, i }) => {
            return (
              <TouchableOpacity
                key={i}
                onPress={() => navigation.navigate("Shop", { product: item })}
              >
                <View style={styles.addUser}>
                  <Image
                    style={styles.img}
                    source={{
                      uri: item.vendor_image
                        ? item.vendor_image
                        : "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
                    }}
                  />
                  <Text
                    style={{
                      color: "#000",
                      fontSize: 13,
                      fontWeight: "600",
                      textTransform: "uppercase",
                      textAlign: "center",
                      // flexWrap: "wrap",
                    }}
                    numberOfLines={2}
                  >
                    {item.user_login}
                  </Text>
                </View>
              </TouchableOpacity>
            );
          }}
        />
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    backgroundColor: "#fff",
    // alignItems: "center",
    // justifyContent: "center",
    width: "100%",
    // marginHorizontal: 10,
    padding: 10,
    // marginTop:25
    //   height: "87%",
  },
  addUser: {
    height: 150,
    width: 150,
    // justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#eee",
    margin: 5,
    padding: 5,
  },
  wrapper: {
    width: "100%",
    height: 250,
    // backgroundColor: "#ffaa00",
  },
  header: {
    fontSize: 14,
    fontWeight: "700",
    textTransform: "uppercase",
  },
  img: {
    width: 80,
    height: 80,
    resizeMode: "cover",
    borderRadius: 10,
    marginVertical: 10,
    // backgroundColor: "#ffaa00",
  },
});
export default TopShops;