umra-app/components/CurrencyConverterModal.tsx

import React, { useState } from 'react';
import { View, Text, TextInput, Modal, StyleSheet, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import i18n from '@/i18n';

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

const CurrencyConverterModal: React.FC<CurrencyConverterModalProps> = ({ visible, onClose }) => {
  const [sar, setSar] = useState('');
  const [tmt, setTmt] = useState('');
  const USD_TO_SAR = '3.70';
  const USD_TO_TMT = '19.5';

  const handleSarChange = (value: string) => {
    setSar(value);

    if (value) {
      const tmtValue = ((Number(value) / Number(USD_TO_SAR)) * Number(USD_TO_TMT)).toFixed(2);
      setTmt(tmtValue);
    } else {
      setTmt('');
    }
  };

  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={visible}
      onRequestClose={onClose}
    >
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        style={styles.centeredView}
      >
        <View style={styles.modalView}>
          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
            <FontAwesome name="close" size={24} color="black" />
          </TouchableOpacity>
          <Text style={styles.modalTitle}>{i18n.t('currencyConverter')}</Text>
          
          <View style={styles.inputContainer}>
            <Text style={styles.currencyLabel}>Riyal</Text>
            <TextInput
              style={styles.input}
              keyboardType="numeric"
              placeholder="0.00"
              placeholderTextColor="#666"
              value={sar}
              onChangeText={handleSarChange}
            />
          </View>
          
          <View style={styles.inputContainer}>
            <Text style={styles.currencyLabel}>Manat</Text>
            <Text style={styles.resultText}>{tmt || '0.00'}</Text>
          </View>

        </View>
      </KeyboardAvoidingView>
    </Modal>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  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: '80%',
  },
  closeButton: {
    position: 'absolute',
    right: 15,
    top: 15,
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15,
    width: '100%',
  },
  currencyLabel: {
    fontSize: 18,
    marginRight: 10,
    width: 60,
  },
  input: {
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    fontSize: 18,
    padding: 5,
    flex: 1,
  },
  resultText: {
    fontSize: 18,
    padding: 5,
    flex: 1,
  }
});

export default CurrencyConverterModal;