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

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

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

const LostKeyModal: React.FC<LostKeyModalProps> = ({ visible, onClose }) => {
  return (
    <Modal
      animationType="fade"
      transparent={true}
      visible={visible}
      onRequestClose={onClose}
    >
      <TouchableOpacity style={styles.overlay} activeOpacity={1} onPress={onClose}>
        <View style={styles.modalContainer}>
          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
            <FontAwesome name="close" size={24} color="black" />
          </TouchableOpacity>
          
          <Text style={styles.smallText} >Aşak resepşyna şul aşakdaky haty görkeziň</Text>
          <Text 
            numberOfLines={1}
            adjustsFontSizeToFit
            style={styles.text}
            >Mastercard</Text>
          <Text style={[styles.text, styles.arabicText]}>ماستركارد</Text>
        </View>
      </TouchableOpacity>
    </Modal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContainer: {
    width: width * 0.9,
    padding: 20,
    backgroundColor: 'white',
    borderRadius: 10,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  closeButton: {
    position: 'absolute',
    top: 15,
    right: 15,
    zIndex: 1,
  },
  text: {
    fontSize: 40,
    marginBottom: 10,
  },
  smallText: {
    marginTop: 15,
    fontSize: 20,
    color: '#666',
    textAlign: 'center',
  },
  arabicText: {
    fontFamily: 'System',
    writingDirection: 'rtl',
  }
});

export default LostKeyModal;