import { Stack } from 'expo-router';
import { useColorScheme } from '@/hooks/useColorScheme';
import { Colors } from '@/constants/Colors';

export default function SettingsLayout() {
  const scheme = useColorScheme() ?? 'dark';
  
  return (
    <Stack
      screenOptions={{
        headerStyle: {
          backgroundColor: Colors[scheme].background,
        },
        headerTintColor: Colors[scheme].text,
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        // This gives the iOS-style slide-in animation
        animation: 'slide_from_right',
      }}
    >
      <Stack.Screen 
        name="index" 
        options={{ 
          title: "Settings",
          headerShown: false,
        }} 
      />
      <Stack.Screen 
        name="profile" 
        options={{ 
          title: "Profile",
          headerShown: true, 
        }} 
      />
      {/* Add more screens as needed */}
    </Stack>
  );
}
