import { LazyMotion, MotionConfig, domAnimation } from "framer-motion";
import type { ReactNode } from "react";

/**
 * Wraps the app once at the root.
 *
 * - `LazyMotion` + `domAnimation` keeps the framer-motion bundle small
 *   (~feature subset, lazily loaded). Components MUST use the `m` namespace
 *   (e.g. `m.div`) rather than `motion.*`; `strict` enforces this so we never
 *   accidentally pull in the full bundle.
 * - `MotionConfig reducedMotion="user"` makes every framer animation respect
 *   the OS "reduce motion" setting automatically (transforms are dropped,
 *   opacity is kept), so individual components don't each need to handle it.
 */
export function MotionProvider({ children }: { children: ReactNode }) {
  return (
    <LazyMotion features={domAnimation} strict>
      <MotionConfig reducedMotion="user">{children}</MotionConfig>
    </LazyMotion>
  );
}
