import React from 'react';
import { Modal, View, Image, StyleSheet, TouchableOpacity, Dimensions, SafeAreaView } from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';

const { width, height } = Dimensions.get('window');

interface HotelBusinessCardModalProps {
  visible: boolean;
  onClose: () => void;
}

const HotelBusinessCardModal: React.FC<HotelBusinessCardModalProps> = ({ visible, onClose }) => {
  return (
    <Modal
      animationType="slide"
      transparent={false}
      visible={visible}
      onRequestClose={onClose}
    >
      <SafeAreaView style={styles.container}>
        <TouchableOpacity style={styles.closeButton} onPress={onClose}>
          <FontAwesome5 name="times" size={30} color="#333" />
        </TouchableOpacity>
        <View style={styles.cardsContainer}>
          <View style={styles.card}>
            <Image source={require('@/assets/images/aisha.jpg')} style={styles.image} />
          </View>
          <View style={styles.card}>
            <Image source={require('@/assets/images/aisha.jpg')} style={styles.image} />
          </View>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  closeButton: {
    position: 'absolute',
    top: 50,
    right: 20,
    zIndex: 1,
  },
  cardsContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
  },
  card: {
    backgroundColor: '#e3e3e3',
    borderRadius: 10,
    padding: 10,
    marginVertical: 15,
    width: width * 0.8,
    height: height * 0.3,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  image: {
    width: '100%',
    height: '100%',
    resizeMode: 'contain',
  },
});

export default HotelBusinessCardModal;