Add TranslatorModal and PhrasebookModal to ServicesScreen; update localization for new phrases

components/TranslatorModal.tsx

@@ -0,0 +1,175 @@
+import React, { useState } from 'react';
+import { Modal, View, Text, TextInput, Button, StyleSheet, TouchableOpacity, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { View as ThemedView } from './Themed';
+import { FontAwesome } from '@expo/vector-icons';
+import i18n from '@/i18n';
+
+type TranslatorModalProps = {
+  visible: boolean;
+  onClose: () => void;
+};
+
+const TranslatorModal = ({ visible, onClose }: TranslatorModalProps) => {
+  const [turkmenText, setTurkmenText] = useState('');
+  const [arabicText, setArabicText] = useState('');
+
+  const handleTranslate = async () => {
+    if (turkmenText.trim() === '') {
+      setArabicText('');
+      return;
+    }
+
+    // --- Placeholder for Translation API call ---
+    // You would replace this with your actual translation logic.
+    // For example, calling a function that makes an API request to a translation service.
+    try {
+      // const translated = await translateText(turkmenText, 'tk', 'ar');
+      // setArabicText(translated);
+      setArabicText(`(Translation for: ${turkmenText})`); // Mock response
+    } catch (error) {
+      console.error("Translation error:", error);
+      setArabicText("Error: Could not translate.");
+    }
+    // -----------------------------------------
+  };
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.keyboardAvoidingContainer}
+      >
+        <ThemedView style={styles.centeredView}>
+          <ScrollView contentContainerStyle={styles.scrollViewContent}>
+            <View style={styles.modalView}>
+              <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+                <FontAwesome name="close" size={24} color="black" />
+              </TouchableOpacity>
+              <Text style={styles.modalTitle}>{i18n.t('Translator')}</Text>
+
+              <View style={styles.inputContainer}>
+                <Text style={styles.label}>Türkmençe</Text>
+                <TextInput
+                  style={[styles.textInput, styles.turkmenInput]}
+                  placeholder="Hat yaz"
+                  placeholderTextColor="#888" // slightly grey
+                  onChangeText={setTurkmenText}
+                  value={turkmenText}
+                  multiline
+                />
+              </View>
+
+              <View style={styles.inputContainer}>
+                <Text style={styles.label}>Arapça</Text>
+                <View style={styles.arabicOutputContainer}>
+                  <Text style={styles.arabicText}>{arabicText}</Text>
+                </View>
+              </View>
+              
+              <TouchableOpacity onPress={handleTranslate} style={styles.translateButton}>
+                <Text style={styles.translateButtonText}>{i18n.t('Translate')}</Text>
+              </TouchableOpacity>
+
+            </View>
+          </ScrollView>
+        </ThemedView>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  keyboardAvoidingContainer: {
+    flex: 1,
+    width: '100%',
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    width: '100%',
+  },
+  scrollViewContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+    width: '100%',
+    minWidth: '90%',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 20,
+  },
+  inputContainer: {
+    marginBottom: 15,
+    minWidth: '90%',
+  },
+  label: {
+    fontSize: 16,
+    marginBottom: 5,
+    color: '#333',
+  },
+  textInput: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 10,
+    padding: 10,
+    fontSize: 16,
+    minWidth: '90%',
+  },
+  turkmenInput: {
+    height: 100,
+    textAlignVertical: 'top',
+  },
+  arabicOutputContainer: {
+    height: 100,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 10,
+    padding: 10,
+    backgroundColor: '#f9f9f9',
+    justifyContent: 'center',
+  },
+  arabicText: {
+    fontSize: 18,
+    textAlign: 'right', // For RTL text
+  },
+  translateButton: {
+    marginTop: 15,
+  },
+  translateButtonText: {
+    color: '#D4AF37',
+    fontSize: 18,
+    fontWeight: '500',
+  },
+});
+
+export default TranslatorModal;