// src/navigation/AppNavigator.tsx
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useTheme } from 'react-native-paper';

import MobileTabNavigator from './MobileTabNavigator';
import EventFormScreen from '../screens/EventFormScreen';
import { AppStackParamList } from '../types/navigation';

const Stack = createNativeStackNavigator<AppStackParamList>();

const AppNavigator = () => {
  const theme = useTheme();

  return (
    <Stack.Navigator
      initialRouteName="MainTabs"
      screenOptions={{
        headerStyle: {
          backgroundColor: theme.colors.surface,
        },
        headerTintColor: theme.colors.text,
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        contentStyle: {
          backgroundColor: theme.colors.background,
        },
      }}
    >
      <Stack.Screen
        name="MainTabs"
        component={MobileTabNavigator}
        options={{ headerShown: false }} // Hide header for the tab navigator container
      />
      <Stack.Screen
        name="EventForm"
        component={EventFormScreen}
        options={{ title: 'Event Details' }} // Set a title for the EventForm screen header
      />
    </Stack.Navigator>
  );
};

export default AppNavigator;
