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

import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
import { useTranslation } from '@/localization/i18n';

export default function TasksLayout() {
  const i18n = useTranslation();
  const title = typeof i18n?.t === 'function' ? i18n.t('tasks.title') : 'Tasks';
  const router = useRouter();
  const colorScheme = useColorScheme();
  const palette = Colors[colorScheme ?? 'light'];

  return (
    <Stack
      screenOptions={{
        headerBackTitleVisible: false,
        headerBackTitle: '',
        headerBackTitleStyle: { display: 'none' },
        headerLeft: ({ canGoBack }) =>
          canGoBack ? (
            <Pressable onPress={() => router.back()} hitSlop={10} style={{ paddingHorizontal: 8 }}>
              <IconSymbol size={20} name="chevron.left" color={palette.text} />
            </Pressable>
          ) : null,
      }}>
      <Stack.Screen
        name="index"
        options={{
          title,
          headerLeft: () => (
            <Pressable onPress={() => router.back()} hitSlop={10} style={{ paddingHorizontal: 8 }}>
              <IconSymbol size={20} name="chevron.left" color={palette.text} />
            </Pressable>
          ),
        }}
      />
      <Stack.Screen name="[id]" options={{ title }} />
    </Stack>
  );
}