import { Ionicons } from "@expo/vector-icons";
import React from "react";
import { Modal, SafeAreaView, TouchableOpacity, View } from "react-native";
import Gallery from "react-native-image-gallery";
export default function MediaCacheOverlay({
  photos,
  previewVisible,
  setPreviewVisible,
  imgIndex,
  setImgIndex,
}) {
  return (
    <Modal
      onDismiss={() => setPreviewVisible(false)}
      onRequestClose={() => setPreviewVisible(false)}
      visible={previewVisible}
      transparent={false}
    >
      <SafeAreaView style={{ flex: 1, backgroundColor: "black" }}>
        <Gallery initialPage={imgIndex} images={photos} />
        <TouchableOpacity
          style={{ position: "absolute" }}
          onPress={() => setPreviewVisible(false)}
        >
          <Ionicons
            name="ios-close"
            size={64}
            color="dodgerblue"
            style={{ margin: 20 }}
          />
        </TouchableOpacity>
      </SafeAreaView>
    </Modal>
  );
}