'use client';

import { useEffect, useRef } from 'react';
import { Provider } from 'react-redux';
import { store } from '@/store/store';
import { setupNetworkDetection } from '@/store/middleware/offlineMiddleware';

export function ReduxProvider({ children }: { children: React.ReactNode }) {
  const cleanupRef = useRef<(() => void) | null>(null);

  useEffect(() => {
    // Setup network detection
    cleanupRef.current = setupNetworkDetection(store.dispatch);

    // Cleanup on unmount
    return () => {
      if (cleanupRef.current) {
        cleanupRef.current();
      }
    };
  }, []);

  return <Provider store={store}>{children}</Provider>;
}