import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const HomeStack = () => (
  <Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: '#007AFF' }, headerTintColor: '#fff' }}>
    <Stack.Screen name="HomeFeed" component={HomeFeed} options={{ title: 'Home' }} />
    <Stack.Screen name="PostDetail" component={PostDetail} options={{ title: 'Post' }} />
  </Stack.Navigator>
);

const ProfileStack = () => (
  <Stack.Navigator>
    <Stack.Screen name="ProfileView" component={ProfileView} options={{ title: 'Profile' }} />
    <Stack.Screen name="Settings" component={Settings} options={{ title: 'Settings' }} />
  </Stack.Navigator>
);

const Navigation = () => (
  <NavigationContainer>
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color }) => {
          const iconName = route.name === 'Home' ? 'home' : 'person';
          return <Ionicons name={focused ? iconName : iconName + '-outline'} color={color} />;
        },
        headerShown: false
      })}
    >
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Profile" component={ProfileStack} />
    </Tab.Navigator>
  </NavigationContainer>
);

KEY PATTERNS: Nesting Stack navigators inside Tab prevents header duplication and manages independent navigation state for each tab. screenOptions standardize styling globally across screens. Ionicons dependency is pre-installed via expo SDK. Each tab screen maintains its own navigation stack independently. Deep linking configuration required for production apps. useFocusEffect hook helps detect when users switch between tabs for analytics or state reset. This pattern scales well to 4-5 tabs maximum.