import { Stack, useNavigation } from 'expo-router';
import { useEffect } from 'react';
import { useStoreHeaderStore } from '@/src/store/storeHeaderStore';

function DynamicHeaderTitle() {
  const navigation = useNavigation();
  const title = useStoreHeaderStore((state) => state.title);

  useEffect(() => {
    if (title) {
      navigation.setOptions({ title });
    }
  }, [title, navigation]);

  return null;
}

export default function ProductDetailLayout() {
  const title = useStoreHeaderStore((state) => state.title);

  return (
    <>
      <DynamicHeaderTitle />
      <Stack
        screenOptions={{
          headerShown: true,
        }}
      >
        <Stack.Screen name="[id]" options={{ title: title || 'Product Details' }} />
      </Stack>
    </>
  );
}
