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

const adhkarCategories = [
  'Thikr said in the morning and evening',
  'Thikr before sleeping',
  'Thikr after salam',
];

const supplications = [
  'Upon breaking fast',
  'Supplication said by one fasting when presented with food and does not break his fast',
  'When insulted while fasting',
  'Supplication upon seeing the early or premature fruit',
  'Supplication upon sneezing',
]

export default function ServicesScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <View style={styles.innerContainer}>
          <Text style={styles.title}>Services</Text>
          <Text style={styles.sectionTitle}>Adhkar</Text>
          {adhkarCategories.map((title, index) => (
            <AdhkarCard key={index} title={title} />
          ))}

          <Text style={styles.sectionTitle}>Hisn Al-Muslim</Text>
          {supplications.map((text, index) => (
            <SupplicationListItem key={index} text={text} 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,
  }
});