// src/components/ApacuanaModal.tsx (NUEVO ARCHIVO)

import React from 'react';
import {
  Modal,
  View,
  StyleSheet,
  TouchableOpacity,
  Text,
  Dimensions,
} from 'react-native';

interface ApacuanaModalProps {
  isVisible: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const { height: windowHeight } = Dimensions.get('window');

export const ApacuanaModal = ({
  isVisible,
  onClose,
  children,
}: ApacuanaModalProps) => {
  return (
    <Modal
      animationType="fade"
      transparent={true}
      visible={isVisible}
      onRequestClose={onClose}
    >
      <View style={styles.modalContainer}>
        <View style={styles.modalContent}>
          <TouchableOpacity style={styles.closeIcon} onPress={onClose}>
            <Text style={styles.closeIconText}>×</Text>
          </TouchableOpacity>
          {children}
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    width: '100%',
    height: '100%',
  },
  modalContent: {
    width: '95%',
    maxWidth: 400,
    minHeight: windowHeight * 0.85, // 70% de la altura de pantalla
    maxHeight: windowHeight * 0.9, // 90% de la altura de pantalla
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 20,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
    position: 'relative',
    justifyContent: 'center',
  },
  closeIcon: {
    position: 'absolute',
    top: 10,
    right: 10,
    zIndex: 10,
    padding: 8,
  },
  closeIconText: {
    fontSize: 28,
    color: '#888',
    fontWeight: 'bold',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  // modalContainer: {
  //   flex: 1,
  // },
  webview: {
    flex: 1, // Es importante que el WebView tenga flex: 1 para ocupar el espacio
  },
  loader: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});