"use client";

import { useEffect, useState } from "react";
import { useAuthStore } from "@/lib/store/auth-store";

export function AuthHydrator({ children }: { children: React.ReactNode }) {
  const hydrate = useAuthStore((s) => s.hydrate);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    hydrate().then(() => setReady(true));
  }, [hydrate]);

  // Always render the same wrapper element so React can safely add/remove
  // children without an element-type swap (div → Fragment) that causes
  // "insertBefore" errors when Next.js script nodes sit alongside React content.
  return (
    <div suppressHydrationWarning>
      {ready ? children : null}
    </div>
  );
}