import { Stack } from 'expo-router';
import { Pressable, Text } from 'react-native';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'expo-router';

export default function AppLayout() {
  const router = useRouter();
  const { t } = useTranslation();

  return (
    <Stack
      screenOptions={{
        headerTitleAlign: 'center',
      }}
    >
      <Stack.Screen
        name="home"
        options={{
          title: t('home.title'),
          headerRight: () => (
            <Pressable
              onPress={() => router.push('/(app)/settings')}
              hitSlop={10}
            >
              <Text>{t('home.settings')}</Text>
            </Pressable>
          ),
          headerLeft: () => (
            <Pressable onPress={() => router.push('/(app)/favorites')} hitSlop={10}>
              <Text>{t('home.favorites')}</Text>
            </Pressable>
          ),
        }}
      />
      <Stack.Screen
        name="favorites"
        options={{
          title: t('favorites.title'),
        }}
      />
      <Stack.Screen
        name="settings"
        options={{
          title: t('settings.title'),
        }}
      />
    </Stack>
  );
}