nguyencongpc_nextjs/src/components/common/MSWProvider.tsx

'use client';
import { useEffect, useState } from 'react';
import { MSWContext } from '@/contexts/MSWContext';

/**
 * Khởi động MSW browser worker trong development.
 * Cung cấp trạng thái ready qua MSWContext để các hook fetch
 * (useApiData) tự chờ MSW sẵn sàng trước khi gọi API.
 */
const MSWProvider = ({ children }: { children: React.ReactNode }) => {
  const [ready, setReady] = useState(process.env.NODE_ENV !== 'development');

  useEffect(() => {
    if (process.env.NODE_ENV !== 'development') return;
    import('@/mocks/browser')
      .then(({ worker }) =>
        worker.start({
          onUnhandledRequest: 'bypass',
          quiet: true,
        }),
      )
      .then(() => setReady(true))
      .catch((err) => {
        console.error('[MSW] Failed to start worker:', err);
        setReady(true);
      });
  }, []);

  return <MSWContext.Provider value={ready}>{children}</MSWContext.Provider>;
};

export default MSWProvider;