import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Modal,
  StyleSheet,
} from "react-native";
import { GlobalTheme } from "../theme";

const CustomAlertModal = ({
  showModal,
  title,
  message,
  buttons = [],
  style = {},
  titleStyle = {},
  messageStyle = {},
  children,
  
}) => {
  return (
    <Modal
      visible={showModal}
      transparent
      animationType="fade"
    >
      <View style={styles.backdrop}>
        <View style={[styles.modalContainer, style]}>
            <TouchableOpacity onPress={onClose} style={styles.closeIcon}>
                <Text style={{ fontSize: 18 }}>✕</Text>
            </TouchableOpacity>
          {title ? (
            <Text style={[styles.title, titleStyle]}>{title}</Text>
          ) : null}

          {message ? (
            <Text style={[styles.message, messageStyle]}>{message}</Text>
          ) : null}

          {children}

          <View style={styles.buttonRow}>
            {buttons.map((btn, index) => (
              <TouchableOpacity
                key={index}
                style={[styles.button, { backgroundColor: btn.backgroundColor || GlobalTheme.colors.primary }]}
                onPress={btn.onPress}
              >
                <Text style={[styles.buttonText, { color: btn.color || "#FFF" }]}>
                  {btn.label}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </View>
    </Modal>
  );
};

export default CustomAlertModal;

const styles = StyleSheet.create({
  backdrop: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center",
    alignItems: "center",
  },
  modalContainer: {
    width: "80%",
    backgroundColor: "#fff",
    borderRadius: 10,
    padding: 20,
    elevation: 5,
  },
  title: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 10,
    textAlign: "center",
  },
  message: {
    fontSize: 16,
    marginBottom: 20,
    textAlign: "center",
  },
  buttonRow: {
    flexDirection: "row",
    justifyContent: "flex-end",
    marginTop: 10,
  },
  button: {
    paddingHorizontal: 15,
    paddingVertical: 8,
    borderRadius: 5,
    marginLeft: 10,
  },
  buttonText: {
    fontSize: 14,
  },
});
