import { useEffect, useState } from "react";

/**
 * Returns true when the user has expressed a preference for reduced motion
 * (OS-level setting: `prefers-reduced-motion: reduce`).
 *
 * SSR-safe: starts as `false` (the default state), so the first render uses
 * the normal animation. The effect then reconciles with the live matchMedia
 * state on the client and re-renders if needed.
 */
export default function useReducedMotion(): boolean {
  const [reduced, setReduced] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    setReduced(mq.matches);
    const onChange = () => setReduced(mq.matches);
    mq.addEventListener("change", onChange);
    return () => mq.removeEventListener("change", onChange);
  }, []);

  return reduced;
}