Untitled

import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Image, ScrollView } from 'react-native';
import { db } from '../firebase/fire';
import { getDocs, collection } from "firebase/firestore";
import { useRouter } from 'expo-router';

export default function EventList() {
  const [events, setEvents] = useState([]);
  const router = useRouter();

  useEffect(() => {
    getEvents();
  }, []);

  const getEvents = async () => {
    setEvents([]);
    const querySnapshot = await getDocs(collection(db, "events"));
    querySnapshot.forEach((doc) => {
      setEvents(events => [...events, { id: doc.id, ...doc.data() }]);
    });
  };

  const handlePress = (event) => {
    const params = {
      eventname: event.eventname,
      time: event.time,
      date: event.date,
      image: event.image,
      about: event.about,
      host: event.host,
      address: event.address,
      seats: event.seats,
    };

    router.push({
      pathname: '/EventDetails',
      params: params,
    });
  };

  return (
    <ScrollView style={styles.container}>
      {events.map((event, index) => (
        <TouchableOpacity
          key={index}
          style={styles.article}
          onPress={() => handlePress(event)}
        >
          <Image source={{ uri: event.image }} style={styles.image} />
          <Text style={styles.title}>{event.eventname}</Text>
          <Text style={styles.details}>Time: {event.time}</Text>
          <Text style={styles.details}>Date: {event.date}</Text>
        </TouchableOpacity>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  article: {
    backgroundColor: '#f9f9f9',
    padding: 15,
    marginVertical: 10,
    borderRadius: 5,
    elevation: 3,
  },
  image: {
    width: '100%',
    height: 200,
    borderRadius: 5,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  details: {
    fontSize: 14,
  },
});