import React, { useEffect } from 'react';
import { View } from 'react-native';
import { useLocalSearchParams } from 'expo-router';
import { SlotLayout } from '@/components/SlotSpecificView';
import TabLayoutWrapper from '@/components/TabLayoutWrapper';
import { useSlotStore } from '@/components/stores/slotStore';

export default function SlotViewLayout() {
  const { slotId: id, storeId: storeIdRaw } = useLocalSearchParams();
  const slotId = id ? Number(id) : undefined;
  const setSlotId = useSlotStore(state => state.setSlotId);
  const setStoreId = useSlotStore(state => state.setStoreId);


  useEffect(() => {
    setSlotId(slotId);
    setStoreId(Number(storeIdRaw));
  }, [slotId, storeIdRaw, setSlotId, setStoreId]);

  
  return (
    <TabLayoutWrapper>
      <SlotLayout slotId={slotId} storeId={Number(storeIdRaw)} baseUrl="/(drawer)/(tabs)/home/slot-view" />
    </TabLayoutWrapper>
  );
}