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

const Variation = () => {
  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}>Variation</Text>
      <View style={{ flexDirection: "row" }}>
        <FlatList
          // inverted
          //   style={styles.wrapper}
          horizontal
          data={cat ? cat : []}
          showsHorizontalScrollIndicator={false}
          renderItem={({ item }) => {
            return (
              <TouchableOpacity onPress={() => {}}>
                <View style={styles.AddUser}>
                  <Image
                    style={styles.img}
                    source={{
                      uri: item,
                    }}
                  />
                  <Text
                    style={{
                      color: "#000",
                      fontSize: 10,
                      flexWrap: "wrap",
                    }}
                  ></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: 200,
    // backgroundColor: "#ffaa00",
    padding: 10,
  },
  header: {
    fontSize: 14,
    fontWeight: "700",
    // textTransform: "uppercase",
    paddingHorizontal:5
  },
  img: {
    width: 80,
    height: 80,
    resizeMode: "cover",
    borderRadius: 10,
    backgroundColor: "#ffefce",
    padding: 10,
  },
  AddUser: {
    padding: 10,
  },
});
export default Variation;