'use client'

import { LazyMotion } from 'framer-motion'

// Every storefront animation uses the tiny `m` components (imported from
// 'framer-motion/m'), which carry no animation engine of their own. The
// engine (`domAnimation`: animate/variants/exit + hover/tap/focus/inView)
// is loaded here on demand, in its own chunk, instead of being bundled into
// every page's main JS the way the full `motion` component was. Anything
// that still needs the full runtime (ProductTabs' `layoutId`, the admin)
// keeps using `motion` — this provider is not `strict` so both coexist.
const loadFeatures = () => import('./motionFeatures').then((mod) => mod.default)

export default function MotionProvider({ children }: { children: React.ReactNode }) {
  return <LazyMotion features={loadFeatures}>{children}</LazyMotion>
}