import { StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
import { Text } from '@/components/Themed';
import i18n from '@/i18n';
import { FontAwesome5 } from '@expo/vector-icons';
import ServiceCard from '@/components/ServiceCard';
import React, { useState } from 'react';
import CurrencyConverterModal from '@/components/CurrencyConverterModal';

export default function ServicesScreen() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>{i18n.t('services')}</Text>

      <View style={styles.row}>
        <TouchableOpacity onPress={() => setModalVisible(true)}>
          <ServiceCard title="Real Manat hasaplama" icon={<FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />} />
        </TouchableOpacity>

        <ServiceCard title="Oteliň wizitkasy" icon={<FontAwesome5 name="hotel" size={24} color="#D4AF37" />} />
        <ServiceCard title="Oteliň açary içinde galsa" icon={<FontAwesome5 name="key" size={24} color="#D4AF37" />} />
        <ServiceCard title="Terjimeçi" icon={<FontAwesome5 name="language" size={24} color="#D4AF37" />} />
      </View>
      <CurrencyConverterModal
        visible={modalVisible}
        onClose={() => setModalVisible(false)}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 15,
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginVertical: 15,
    marginLeft: 15,
  },
  row: {
    flex: 1,
    justifyContent: 'space-around',
    flexDirection: 'row',
    flexWrap: 'wrap',
    rowGap: 0,
  },
});