import React from 'react';
import { View, Text, StyleSheet, ImageBackground } from 'react-native';
import Colors from '@/constants/Colors';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

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' },
];

export default function PrayerTimeCard() {
  const colorScheme = 'dark';

  return (
    <ImageBackground
      source={{ uri: 'https://i.imgur.com/your-image.jpg' }} // Replace with a real image URL
      style={styles.container}
      imageStyle={{ borderRadius: 15 }}
    >
      <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>
        <Text style={styles.remainingTimeLabel}>Left on Maghreb prayer</Text>
        <Text style={styles.remainingTime}>49:44</Text>
        <View style={styles.prayerTimesContainer}>
          {prayerTimes.map((prayer, index) => (
            <View key={index} style={styles.prayerTimeItem}>
              <MaterialCommunityIcons name={prayer.icon} size={24} color={Colors.dark.text} />
              <Text style={styles.prayerName}>{prayer.name}</Text>
              <Text style={styles.prayerTime}>{prayer.time}</Text>
            </View>
          ))}
        </View>
      </View>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  container: {
    marginVertical: 20,
    borderRadius: 15,
  },
  overlay: {
    backgroundColor: 'rgba(0,0,0,0.5)',
    borderRadius: 15,
    padding: 20,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  location: {
    color: Colors.dark.text,
    marginLeft: 10,
  },
  remainingTimeLabel: {
    color: Colors.dark.textSecondary,
    textAlign: 'center',
  },
  remainingTime: {
    color: Colors.dark.text,
    fontSize: 48,
    fontWeight: 'bold',
    textAlign: 'center',
    marginVertical: 10,
  },
  prayerTimesContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 20,
  },
  prayerTimeItem: {
    alignItems: 'center',
  },
  prayerName: {
    color: Colors.dark.text,
    marginTop: 5,
  },
  prayerTime: {
    color: Colors.dark.textSecondary,
    fontSize: 12,
  },
});