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";
import { Ionicons } from "@expo/vector-icons";

function Btn({ label, onPress, bgColor, txtColor, style = {} }) {
  return (
    <TouchableOpacity style={{ marginTop: 15 }} onPress={onPress}>
      <View
        style={[
          style,
          {
            paddingHorizontal: 40,
            paddingVertical: 7,
            backgroundColor: bgColor,
            borderRadius: 6,
            height: 48,
            flexDirection: "row",
          },
        ]}
      >
        <Text
          style={{
            color: txtColor,
            fontWeight: "bold",
            textTransform: "uppercase",
            textAlignVertical: "center",
            alignSelf: "center",
          }}
        >
          {label}
        </Text>
      </View>
    </TouchableOpacity>
  );
}

export default function ConfirmationModal({
  show,
  onConfirm,
  onDecline,
  confirmationLabel,
  declineLabel,
  title = null,
  description = "",
  icon = null,
}) {
  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}>
            {title && (
              <View style={{ flex: 1, marginBottom: title !== "" ? 40 : 0 }}>
                <Text
                  style={[styles.text, { fontSize: dimensions.text.secondary }]}
                >
                  {title}
                </Text>
              </View>
            )}
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              {icon && (
                <View style={{ marginRight: 12 }}>
                  <Ionicons name={icon} size={30} color={colors.primary} />
                </View>
              )}
              <Text style={styles.text}>{description}</Text>
            </View>
            <View
              style={{
                flexDirection: "row",
                justifyContent: "flex-end",
                marginTop: 24,
              }}
            >
              {onDecline && declineLabel && (
                <Btn
                  style={{ marginRight: 16 }}
                  label={declineLabel}
                  onPress={onDecline}
                  bgColor={colors.secondary}
                  txtColor={colors.white}
                />
              )}
              {onConfirm && confirmationLabel && (
                <Btn
                  label={confirmationLabel}
                  onPress={onConfirm}
                  bgColor={colors.primary}
                  txtColor={colors.white}
                />
              )}
            </View>
          </View>
        </View>
      </TouchableOpacity>
    </Modal>
  );
}

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