import React from "react";
import { StyleSheet, View, Text, Image } from "react-native";
import Swiper from "react-native-swiper";

const SwiperCon = () => {
  const slider = [
    {
      img: "https://obanana.com/wp-content/uploads/2023/04/banner-05.jpg",
    },
    {
      img: "https://obanana.com/wp-content/uploads/2021/07/new-popup-2022-768x394.png",
    },
    {
      img: "https://obanana.com/wp-content/uploads/2023/04/Banner-04_compressed-scaled-1.jpg",
    },
  ];
  return (
    <View style={styles.container}>
      <Swiper style={styles.wrapper} autoplay>
        {slider.map((e, index) => (
          <View style={styles.slide1} key={index}>
            <Image source={{ uri: e.img }} style={styles.image} />
          </View>
        ))}
      </Swiper>
    </View>
  );
};
const styles = StyleSheet.create({
  wrapper: {
    height: 150,
    borderRadius: 15,
    overflow: 'hidden',
    // marginHorizontal:10
  },
  container: {
    height: 150,
  },
  slide1: { justifyContent: "center", alignItems: "center" },
  slide2: { justifyContent: "center", alignItems: "center" },
  text: {
    color: "#0a0a0a",
    fontSize: 25,
    fontWeight: "bold",
  },
  image: {
    width: "100%",
    height: '100%', // You can adjust the resizeMode as needed
    margin:'auto'
  },
});
export default SwiperCon;