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

const services = [
  {
    key: 'sarToTmt',
    title: 'Manat kursy',
    icon: <FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />,
  },
  {
    key: 'hotelBusinessCard',
    title: 'Oteliň wizitkasy',
    icon: <FontAwesome5 name="hotel" size={24} color="#D4AF37" />,
  },
  {
    key: 'masterkeyBox',
    title: 'Oteliň açary içinde galsa',
    icon: <FontAwesome5 name="key" size={24} color="#D4AF37" />,
  },
  {
    key: 'translator',
    title: 'Terjimeçi',
    icon: <FontAwesome5 name="language" size={24} color="#D4AF37" />,
  },
];

export default function ServicesScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>{i18n.t('services')}</Text>
        <FlatList
          data={services}
          renderItem={({ item }) => <ServiceCard title={item.title} icon={item.icon} />}
          keyExtractor={(item) => item.key}
          numColumns={2}
          columnWrapperStyle={styles.row}
        />
    </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',
  },
});