import React from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';
import { RootState } from '../store/store';

export default function FavoritesScreen({ navigation }: any) {
  const { events, favorites } = useSelector((state: RootState) => state.events);
  const favoriteEvents = events.filter(e => favorites.includes(e.id));

  return (
    <View style={styles.container}>
      {favoriteEvents.length === 0 ? (
        <Text style={styles.empty}>Nincs kedvenc esemény</Text>
      ) : (
        <FlatList
          data={favoriteEvents}
          keyExtractor={item => item.id}
          renderItem={({ item }) => (
            <TouchableOpacity
              style={styles.item}
              onPress={() => navigation.navigate('Details', { event: item })}
            >
              <Text style={styles.title}>{item.name}</Text>
            </TouchableOpacity>
          )}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  item: { padding: 16, borderBottomWidth: 1 },
  title: { fontSize: 16 },
  empty: { textAlign: 'center', marginTop: 50, fontSize: 16, color: '#666' },
});