"use client";

import React from "react";
import { MotionConfig } from "motion/react";

/**
 * Centralize motion defaults: durations, easings, reduced-motion handling.
 * Wrap the app in this provider (see app/layout.tsx).
 */
export function MotionConfigProvider({ children }: { children: React.ReactNode }) {
  // Respect prefers-reduced-motion by simplifying animations
  const prefersReducedMotion =
    typeof window !== "undefined" &&
    window.matchMedia &&
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  // Shared transition tokens
  const duration = prefersReducedMotion ? 0 : 0.6;
  const delay = prefersReducedMotion ? 0 : 0.0;
  // A premium-feel cubic-bezier; slightly snappier in the end
  const ease: [number, number, number, number] = [0.2, 0.8, 0.2, 1];

  return (
    <MotionConfig
      reducedMotion={prefersReducedMotion ? "always" : "never"}
      transition={{
        duration,
        ease,
        delay,
      }}
    >
      {children}
    </MotionConfig>
  );
}