"use client";

// Browser-side mock worker. Wraps the app so that no in-page fetch fires
// until the Service Worker has claimed the page — otherwise the very
// first request races the SW registration and slips through unmocked.
//
// When `NEXT_PUBLIC_MOCKS` is unset (production), the wrapper renders
// children synchronously with zero overhead. Requires
// `public/mockServiceWorker.js` — shipped by the scaffold and pinned
// to the same `msw` version as this template. Regenerate with
// `npx msw init public/ --save` only if you bump the `msw` dep.

import { useEffect, useState, type ReactNode } from "react";
import { enableMockWorker } from "@raredays/mocks/browser";
import { handlers } from "./handlers";

const ENABLED = process.env.NEXT_PUBLIC_MOCKS === "on";
const worker = ENABLED ? enableMockWorker(handlers) : null;

export function StartMocks({ children }: { children: ReactNode }): ReactNode {
  const [ready, setReady] = useState(!ENABLED);
  useEffect(() => {
    if (!worker) return;
    void worker.start().then(() => setReady(true));
    return () => worker.stop();
  }, []);
  return ready ? children : null;
}