import { StyleSheet, SafeAreaView, ScrollView } from 'react-native';
import { Text, View } from '@/components/Themed';
import FeatureCard from '@/components/FeatureCard';
import PrayerTimeCard from '@/components/PrayerTimeCard';
import ServicesGrid from '@/components/ServicesGrid';

export default function HomeScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <View style={styles.innerContainer}>
          <Text style={styles.title}>Home</Text>
          <FeatureCard
            isNew
            title="Your Journey to Hajj"
            description="Everything you need for Hajj essentials."
          />
          <View style={styles.cardRow}>
            <View style={{ flex: 1, marginRight: 10 }}>
              <FeatureCard
                title="Umrah"
                description="Book Permit"
              />
            </View>
            <View style={{ flex: 1, marginLeft: 10 }}>
              <FeatureCard
                title="Noble Rawdah"
                description="Book Permit"
              />
            </View>
          </View>
          <PrayerTimeCard />
          <ServicesGrid />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  innerContainer: {
    paddingHorizontal: 15,
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginVertical: 15,
  },
  cardRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});