import { Tabs } from 'expo-router'
import { MenuBarUnified } from 'src/components/menu'

// expo-router Tabs navigator. tabBar renders MenuBarUnified — two physically
// separate pills (hug context + full-width tab strip). Camera is last so it
// anchors the right edge as the create affordance.

export const unstable_settings = {
  initialRouteName: 'home',
}

export default function AppLayout() {
  return (
    <Tabs
      screenOptions={{ headerShown: false }}
      tabBar={(props) => <MenuBarUnified {...props} />}
    >
      <Tabs.Screen name="home" options={{ title: 'Home' }} />
      <Tabs.Screen name="explore" options={{ title: 'Explore' }} />
      <Tabs.Screen name="notifications" options={{ title: 'Notifications' }} />
      <Tabs.Screen name="profile" options={{ title: 'Profile' }} />
      <Tabs.Screen name="camera" options={{ title: 'New post' }} />
    </Tabs>
  )
}
