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";
import appliances from "../../../../assets/categories/Appliances.png";
import Home from "../../../../assets/categories/Home.png";
import EVehicle from "../../../../assets/categories/EVehicle.png";
import Ebike from "../../../../assets/categories/Ebike.png";
import Electronics from "../../../../assets/categories/Electonics.png";
import Solar from "../../../../assets/categories/Solar.png";
import HeavyEquipments from "../../../../assets/categories/HeavyEquipments.png";

const TopCategories = () => {
  const navigation = useNavigation();

  const cat = [
    {
      img: Solar,
      label: "Solar",
    },
    {
      img: Ebike,
      label: "E-Bike",
    },
    {
      img: appliances,
      label: "Appliance",
    },
    {
      img: EVehicle,
      label: "E-Vehicle",
    },
    {
      img: Electronics,
      label: "Electronics",
    },
    // {
    //   img: "https://previews.123rf.com/images/sergiobarrios/sergiobarrios1305/sergiobarrios130500039/19499978-stethoscope-doctor-medical-material-detail-control-and-prevention-health.jpg",
    //   label: "Smart Home",
    // },
    {
      img: HeavyEquipments,
      label: "Heavy Equpment",
    },
    {
      img: Home,
      label: "Smart Home",
    },
    // {
    //   img: "https://static.vecteezy.com/system/resources/previews/023/477/419/non_2x/ai-generative-collection-of-sports-equipment-commonly-sold-at-a-supermarket-circle-label-for-a-sports-goods-free-png.png",
    //   label: "sports equipment",
    // },
    // {
    //   img: "https://www.automotivetrainingequipment.com/cdn/shop/files/AutoEDU-main-phone_800x.jpg?v=1633689905",
    //   label: "automotive training equipment",
    // },
    // Add the rest of the items here...
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.header}> TOP CATEGORIES</Text>
      <View
        style={{
          flexDirection: "row",
          width: "100%",
          height: 150,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <FlatList
          // inverted
          //   style={styles.wrapper}
          // numColumns={4}
          horizontal
          data={cat ? cat : []}
          showsHorizontalScrollIndicator={false}
          renderItem={({ item }) => {
            return (
              <TouchableOpacity
                onPress={() =>
                  navigation.navigate("Search", { cat: item.label })
                }
              >
                <View style={styles.AddUser}>
                  <Image style={styles.img} source={item.img} />
                  <Text
                    numberOfLines={2}
                    ellipsizeMode="tail"
                    style={{
                      color: "#000",
                      fontSize: 12,
                      // flexWrap: "wrap",
                      fontWeight: "500",
                      textAlign: "center",
                      textTransform: "uppercase",
                      // overflow: "hidden",
                      // paddingBottom:10
                    }}
                  >
                    {item.label}
                  </Text>
                </View>
              </TouchableOpacity>
            );
          }}
        />
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    backgroundColor: "#fff",
    // alignItems: "center",
    // justifyContent: "center",
    width: "100%",
    // marginHorizontal: 10,
    padding: 10,

    //   height: "87%",
  },
  wrapper: {
    width: "100%",
    height: 90,
    // backgroundColor: "#ffaa00",
  },
  header: {
    fontSize: 14,
    fontWeight: "700",
    textTransform: "uppercase",
    marginBottom: 10,
  },
  AddUser: {
    width: 90,
    // height: 70,
    // padding: 10,
    margin: 5,
    backgroundColor: "#ffff",
    alignItems: "center",
    // borderRadius: 10,

    // justifyContent: "center",
  },
  img: {
    width: 70,
    height: 70,
    resizeMode: "cover",
    borderRadius: 100,
    margin: 4,
    // backgroundColor: "#ffaa00",
  },
});
export default TopCategories;