WPD-MobileApp/src/app/components/ConfirmationModal.js

import React from "react";
import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import colors from "../config/colors";
import { dimensions } from "../config/dimensions";

function Btn({ label, onPress, bgColor, txtColor }) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View
        style={{
          paddingHorizontal: 40,
          paddingVertical: 7,
          backgroundColor: bgColor,
          borderRadius: 6,
        }}
      >
        <Text style={{color: txtColor, fontWeight: "bold"}}>{label}</Text>
      </View>
    </TouchableOpacity>
  );
}

export default function ConfirmationModal({
  show,
  onConfirm,
  onDecline, 
  confirmationLabel,
  declineLabel,
  title = "",
  description = "",
}) {
  return (
    <Modal
      transparent={true}
      animationType="slide"
      visible={show}
      supportedOrientations={["portrait"]}
    >
      <TouchableOpacity onPress={onDecline}>
        <View
          style={{
            width: "100%",
            height: "100%",
            justifyContent: "center",
          }}
        >
          <View style={styles.container}>
            <View style={{ flex: 1, marginBottom: title !== "" ? 40 : 0 }}>
              <Text
                style={[styles.text, { fontSize: dimensions.text.secondary }]}
              >
                {title}
              </Text>
            </View>
            <Text style={styles.text}>{description}</Text>
            <View
              style={{
                flexDirection: "row",
                justifyContent: "space-evenly",
                marginTop:  24,
              }}
            >
              {onConfirm && confirmationLabel && <Btn
                label={confirmationLabel}
                onPress={onConfirm}
                bgColor={colors.secondary}
                txtColor={colors.white}
              />}
              {onDecline && declineLabel && <Btn
                label={declineLabel}
                onPress={onDecline}
                bgColor={colors.lightGray}
                txtColor={colors.black}
              />}
            </View>
          </View>
        </View>
      </TouchableOpacity>
    </Modal>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "80%",
    justifyContent: "center",
    alignSelf: "center",
    backgroundColor: colors.lightestGray,
    borderColor: colors.primary,
    borderWidth: 2,
    borderRadius: 12,
    paddingVertical: 16,
    paddingHorizontal: 12
  },
  text: {
    fontSize: dimensions.text.default,
    textAlign: "left",
    fontWeight: "bold",
  },
});