import { PropsWithChildren, ReactNode } from "react";
import { StyleSheet, View } from "react-native";
import { MaterialIcons } from '@expo/vector-icons';

type FullPageMessageModalProps = PropsWithChildren<{
  onDismiss: () => void;
  isVisible: boolean;
}>;

export const FullPageMessageModal = ({onDismiss, isVisible, children}: FullPageMessageModalProps) => {
  
  if (!isVisible) {
    return null;
  }
  
  return (
    <View style={styles.mainContainer}>
        <View style={styles.modalContainer}>
            <MaterialIcons name="close" size={32} color="red" style={{position: 'absolute', right: 10, top: 10}} onPress={onDismiss} />
            {children}
        </View>
    </View>
  );
}

const styles = StyleSheet.create({
    mainContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.5)',
        position: 'absolute',
        width: '100%',
        height: '100%',
        zIndex: 4
    },
    modalContainer: {
        padding: 20,
        backgroundColor: 'white',
        borderRadius: 10,
        width: '80%',
        aspectRatio: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});