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 HarvestsLayout() {
  const { t } = useTranslation();
  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: t('harvests.title'),
          headerLeft: () => (
            <Pressable onPress={() => router.back()} hitSlop={10} style={{ paddingHorizontal: 8 }}>
              <IconSymbol size={20} name="chevron.left" color={palette.text} />
            </Pressable>
          ),
        }}
      />
      <Stack.Screen name="new" options={{ title: t('harvests.new') }} />
      <Stack.Screen name="[id]" options={{ title: t('harvests.edit') }} />
    </Stack>
  );
}