import React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider } from 'react-redux';
import { store } from './store/store';
import EventsScreen from './screens/EventsScreen';
import DetailsScreen from './screens/DetailsScreen';
import FavoritesScreen from './screens/FavoritesScreen';
import { TouchableOpacity, Text } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const Stack = createStackNavigator();

const DarkTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: '#ff00ff',
    background: '#000000',
    card: '#1a1a1a',
    text: '#ffffff',
    border: '#333333',
  },
};

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Provider store={store}>
        <NavigationContainer theme={DarkTheme}>
        <Stack.Navigator>
          <Stack.Screen
            name="Events"
            component={EventsScreen}
            options={({ navigation }) => ({
              title: 'Események',
              headerRight: () => (
                <TouchableOpacity onPress={() => navigation.navigate('Favorites')} style={{ marginRight: 16 }}>
                  <Text style={{ fontSize: 18, color: '#ff00ff' }}>like</Text>
                </TouchableOpacity>
              ),
            })}
          />
          <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Részletek' }} />
          <Stack.Screen name="Favorites" component={FavoritesScreen} options={{ title: 'Kedvencek' }} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
    </GestureHandlerRootView>
  );
}