import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import Modal from "react-native-modal";

const DeleteConfirmationModal = ({ isVisible, onCancel, onConfirm }) => {
  return (
    <Modal isVisible={isVisible}>
      <View
        style={{
          height: 200,
          width: "100%",
          backgroundColor: "#fff",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: 15,
        }}
      >
        <Text>Are you sure you want to delete? it cannot be undone</Text>
        <View style={styles.buttons}>
          <TouchableOpacity onPress={onCancel} style={styles.btnCancel}>
            <Text style={styles.btnCancelText}>Cancel</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={onConfirm} style={styles.btnConfirm}>
            <Text style={styles.btnConfirmText}>Confirm</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
};
const styles = StyleSheet.create({
  actions: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 10,
  },

  buttons: {
    position: "absolute",
    flexDirection: "row",
    bottom: 0,
  },
  btnCancel: {
    color: "#ff0000",
    padding: 10,
  },
  btnCancelText: {
    color: "#ff0000",
    padding: 10,
  },
  btnConfirm: {
    color: "#ff0000",
    padding: 10,
  },
  btnConfirmText: {
    color: "#001aff",
    padding: 10,
  },
});
export default DeleteConfirmationModal;