salah times done maybe

components/PrayerTimeCard.tsx

@@ -1,19 +1,84 @@
-import React from 'react';
-import { View, Text, StyleSheet, ImageBackground } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ImageBackground, Pressable } from 'react-native';
 import Colors from '@/constants/Colors';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import prayerTimeCalculator, { cities } from '@/utils/prayerTimeCalculator';
 
-const prayerTimes = [
-  { name: 'Al-fajr', time: '04:48 AM', icon: 'weather-sunset-up' },
-  { name: 'Sunrise', time: '06:20 AM', icon: 'weather-sunny' },
-  { name: 'Dhohr', time: '01:06 PM', icon: 'weather-partly-cloudy' },
-  { name: 'Asr', time: '04:50 PM', icon: 'weather-cloudy' },
-  { name: 'Maghreb', time: '07:51 PM', icon: 'weather-sunset-down' },
-  { name: 'Isha', time: '09:02 PM', icon: 'weather-night' },
-];
+type Prayer = {
+  name: string;
+  time: string;
+  icon: string;
+};
+
+const prayerIconMapping: { [key: string]: string } = {
+  fajr: 'weather-sunset-up',
+  sunrise: 'weather-sunny',
+  dhuhr: 'weather-partly-cloudy',
+  asr: 'weather-cloudy',
+  maghrib: 'weather-sunset-down',
+  isha: 'weather-night',
+};
 
 export default function PrayerTimeCard() {
-  const colorScheme = 'dark';
+  const [prayerTimes, setPrayerTimes] = useState<Prayer[]>([]);
+  const [nextPrayer, setNextPrayer] = useState<{ name: string; time: string } | null>(null);
+  const [remainingTime, setRemainingTime] = useState('');
+  const [selectedCity, setSelectedCity] = useState<'Makkah' | 'Medina' | 'Jeddah'>('Makkah');
+
+  useEffect(() => {
+    const city = cities[selectedCity];
+    const times = prayerTimeCalculator.getTimes(new Date(), city.coords, city.timezone, 0, '24h');
+    
+    const prayers: Prayer[] = Object.keys(prayerIconMapping).map(key => ({
+      name: key.charAt(0).toUpperCase() + key.slice(1),
+      time: times[key] || '-----',
+      icon: prayerIconMapping[key],
+    }));
+
+    setPrayerTimes(prayers);
+
+    // Find next prayer and calculate remaining time
+    const now = new Date();
+    let nextPrayerInfo = null;
+    for (const prayer of prayers) {
+      const [hours, minutes] = prayer.time.split(':').map(Number);
+      const prayerDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
+      if (prayerDate > now) {
+        nextPrayerInfo = { name: prayer.name, time: prayer.time };
+        break;
+      }
+    }
+
+    if (!nextPrayerInfo && prayers.length > 0) {
+      // If all prayers for today have passed, next prayer is Fajr of tomorrow
+      nextPrayerInfo = { name: prayers[0].name, time: prayers[0].time };
+    }
+
+    setNextPrayer(nextPrayerInfo);
+
+  }, [selectedCity]);
+
+  useEffect(() => {
+    if (!nextPrayer) return;
+
+    const interval = setInterval(() => {
+      const now = new Date();
+      const [hours, minutes] = nextPrayer.time.split(':').map(Number);
+      let prayerDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes);
+      
+      if (prayerDate < now) {
+        prayerDate.setDate(prayerDate.getDate() + 1);
+      }
+
+      const diff = prayerDate.getTime() - now.getTime();
+      const h = Math.floor(diff / (1000 * 60 * 60));
+      const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+      const s = Math.floor((diff % (1000 * 60)) / 1000);
+      setRemainingTime(`${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [nextPrayer]);
 
   return (
     <ImageBackground
@@ -23,11 +88,18 @@ export default function PrayerTimeCard() {
     >
       <View style={styles.overlay}>
         <View style={styles.header}>
-          <MaterialCommunityIcons name="refresh" size={16} color={Colors.dark.text} />
-          <Text style={styles.location}>Mashhad, Iran</Text>
+          <View style={styles.citySelector}>
+            {Object.keys(cities).map(city => (
+              <Pressable key={city} onPress={() => setSelectedCity(city as any)} style={[styles.cityButton, selectedCity === city && styles.activeCity]}>
+                <Text style={styles.cityButtonText}>{city}</Text>
+              </Pressable>
+            ))}
+          </View>
         </View>
-        <Text style={styles.remainingTimeLabel}>Left on Maghreb prayer</Text>
-        <Text style={styles.remainingTime}>49:44</Text>
+        <Text style={styles.remainingTimeLabel}>
+          {nextPrayer ? `Left on ${nextPrayer.name} prayer` : 'Prayer Times'}
+        </Text>
+        <Text style={styles.remainingTime}>{remainingTime}</Text>
         <View style={styles.prayerTimesContainer}>
           {prayerTimes.map((prayer, index) => (
             <View key={index} style={styles.prayerTimeItem}>
@@ -56,10 +128,24 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     marginBottom: 20,
+    justifyContent: 'center',
   },
-  location: {
+  citySelector: {
+    flexDirection: 'row',
+    backgroundColor: Colors.dark.secondary,
+    borderRadius: 10,
+  },
+  cityButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 15,
+    borderRadius: 10,
+  },
+  activeCity: {
+    backgroundColor: Colors.dark.tint,
+  },
+  cityButtonText: {
     color: Colors.dark.text,
-    marginLeft: 10,
+    fontWeight: 'bold',
   },
   remainingTimeLabel: {
     color: Colors.dark.textSecondary,