import { Text, View, Dimensions } from "react-native";
import React from "react";
import Swiper from "react-native-swiper";
import { Image } from "expo-image";
import { useTailwind } from "tailwind-rn";

export default function Banner({ urls }) {
  const tailwind = useTailwind();
  const screenWidth = Dimensions.get("window").width;
  return (
    <Swiper
      autoplay
      width={screenWidth}
      height={(screenWidth * 2) / 7}
      paginationStyle={tailwind("bottom-2")}
      activeDotStyle={tailwind("bg-fuchsia-400")}
    >
      {urls.map((url) => (
        <View key={url} style={tailwind("px-2 py-1")}>
          <Image
            source={url}
            contentFit="cover"
            transition={1000}
            cachePolicy="disk"
            style={tailwind("w-full h-full rounded-lg overflow-hidden")}
          />
        </View>
      ))}
    </Swiper>
  );
}