import { StyleSheet, SafeAreaView, ScrollView } from 'react-native';
import { Text, View } from '@/components/Themed';
import AdhkarCard from '@/components/AdhkarCard';
import SupplicationListItem from '@/components/SupplicationListItem';
import i18n from '@/i18n';

const adhkarCategories = [
  'morningEveningThikr',
  'beforeSleepingThikr',
  'afterSalamThikr',
];

const supplications = [
  'breakingFastSupplication',
  'fastingPersonSupplication',
  'insultedWhileFasting',
  'seeingFruitSupplication',
  'sneezingSupplication',
]

export default function ServicesScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <View style={styles.innerContainer}>
          <Text style={styles.title}>{i18n.t('services')}</Text>
          <Text style={styles.sectionTitle}>{i18n.t('adhkar')}</Text>
          {adhkarCategories.map((titleKey, index) => (
            <AdhkarCard key={index} title={i18n.t(titleKey)} />
          ))}

          <Text style={styles.sectionTitle}>{i18n.t('hisnAlMuslim')}</Text>
          {supplications.map((textKey, index) => (
            <SupplicationListItem key={index} text={i18n.t(textKey)} onPress={() => {}} />
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  innerContainer: {
    paddingHorizontal: 15,
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginVertical: 15,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
    marginVertical: 10,
  }
});