umra-app/app/(tabs)/programs.tsx

import { useState } from 'react';
import { StyleSheet, SafeAreaView, Text, View, TouchableOpacity, ScrollView } from 'react-native';
import Colors from '@/constants/Colors';
import { FontAwesome, FontAwesome5 } from '@expo/vector-icons';

type Activity = {
  time: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  transport?: string;
};

type Activities = {
  [key: string]: Activity[];
};

export default function Programs() {
  const colorScheme = 'dark';
  const [activeDay, setActiveDay] = useState('Day 1');

  const activities: Activities = {
    'Day 1': [
      {
        time: '16:30 - 19:15',
        title: 'Depart for Mecca',
        description: 'From your location to Mecca',
        icon: <FontAwesome name="plane" size={24} color="black" />,
        transport: 'Transport to hotel',
      },
      {
        time: '21:00 - 23:00',
        title: 'Dinner at Al-Baik',
        description: 'Masjid al-',
        icon: <FontAwesome name="cutlery" size={24} color="black" />,
      },
      {
        time: '00:00 - 04:00',
        title: 'Tawaf',
        description: 'Kaaba',
        icon: <FontAwesome5 name="kaaba" size={24} color="black" />,
      },
    ],
    'Day 2': [
      {
        time: '10:00 - 12:00',
        title: 'Shopping',
        description: 'Zamzam Tower',
        icon: <FontAwesome name="shopping-bag" size={24} color="black" />,
      },
    ],
    'Day 3': [],
    'Day 4': [],
  };

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: Colors[colorScheme].background }]}>
      <View style={styles.header}>
        <Text style={[styles.title, { color: Colors[colorScheme].text }]}>Umrah Pilgrimage</Text>
      </View>

      <View>
        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.daysScroll}>
          {Object.keys(activities).map((day) => (
            <TouchableOpacity
              key={day}
              style={[styles.dayButton, activeDay === day && styles.activeDayButton]}
              onPress={() => setActiveDay(day)}
            >
              <Text style={[styles.dayText, activeDay === day && styles.activeDayText]}>{day}</Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>

      <ScrollView style={styles.content}>
        {activities[activeDay].map((activity, index) => (
          <View key={index}>
            <View style={styles.activityCard}>
              <View style={styles.timeContainer}>
                <Text style={styles.timeText}>{activity.time}</Text>
                <Text style={styles.activityTitle}>{activity.title}</Text>
                <Text style={styles.activityDescription}>{activity.description}</Text>
              </View>
              <View style={styles.iconContainer}>{activity.icon}</View>
            </View>
            {activity.transport && (
              <View style={styles.transportContainer}>
                <View style={styles.dot} />
                <View style={styles.dot} />
                <View style={styles.dot} />
                <Text style={styles.transportText}>{activity.transport}</Text>
              </View>
            )}
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    alignItems: 'center',
    paddingVertical: 10,
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  daysScroll: {
    paddingHorizontal: 20,
    paddingVertical: 10,
  },
  dayButton: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 20,
    backgroundColor: '#333',
    marginRight: 10,
  },
  activeDayButton: {
    backgroundColor: '#555',
  },
  dayText: {
    color: 'white',
  },
  activeDayText: {
    fontWeight: 'bold',
  },
  content: {
    flex: 1,
    paddingHorizontal: 20,
  },
  activityCard: {
    backgroundColor: '#222',
    borderRadius: 15,
    padding: 20,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
  timeContainer: {
    flex: 1,
  },
  timeText: {
    color: 'gray',
    fontSize: 14,
  },
  activityTitle: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
    marginVertical: 4,
  },
  activityDescription: {
    color: 'gray',
    fontSize: 14,
  },
  iconContainer: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  transportContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 10,
  },
  dot: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: 'gray',
    marginHorizontal: 3,
  },
  transportText: {
    color: 'gray',
    marginLeft: 10,
  },
});