import React from 'react';
import { View, Text, Modal, StyleSheet, TouchableOpacity, Image} from 'react-native';
import IMAGES from '../constants/Images';

const CustomModal = ({
  showModal,
  title,
  message,
  children,
  // onClose,
  style = {},
  titleStyle = {},
  messageStyle = {},
  hideDefaultClose = false, // 🔥 new prop
  onClose = null
}) => {
  return (
    <Modal visible={showModal} transparent animationType="fade">
      <View style={styles.overlay}>
        <View style={[styles.modalContainer, style]}>
            {onClose  && (
            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
             <Image source={IMAGES.crossIcon} style={styles.iconStyle} />
            </TouchableOpacity>
            )}

          {title && <Text style={[styles.title, titleStyle]}>{title}</Text>}
          {message && <Text style={[styles.message, messageStyle]}>{message}</Text>}

          <View style={{ marginVertical: 10 }}>{children}</View>

        </View>
      </View>
    </Modal>
  );
};

export default CustomModal;

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: '#00000088',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContainer: {
    width: '90%',
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 15,
    alignItems: 'center',
    minHeight:200
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 6,
    color: "#000"
  },
  message: {
    fontSize: 14,
    color: '#555',
    textAlign: 'center',
  },
  closeButton: {
    alignSelf:'flex-end',
    marginBottom:15
  },
  closeText: {
    color: '#fff',
    fontWeight: 'bold',
  },
  iconStyle:{
    height:35,
    width:35,
    resizeMode:'contain',
    // tintColor:'red'
  }
});
