import FloatingCartBar from "@/components/floating-cart-bar";
import { tw } from "common-ui";
import { Stack, useNavigation } from 'expo-router';
import { View } from "react-native";
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>
    <View style={tw`absolute bottom-2 left-4 right-4`}> 
        <FloatingCartBar />
    </View>
    </>
  );
}
