"use client";

import { MotionConfig } from "framer-motion";

import { useReducedMotionPref } from "@/lib/motion-pref";

/**
 * Teaches framer-motion about the in-app "reduce motion" setting: with the
 * toggle on, every motion component runs in its calm mode (`always`), not just
 * when the OS asks (`user`). Renders nothing itself, so the tree below stays
 * exactly as it was.
 */
export function MotionPreference({ children }: { children: React.ReactNode }) {
  const { reduced } = useReducedMotionPref();
  return <MotionConfig reducedMotion={reduced ? "always" : "user"}>{children}</MotionConfig>;
}