"use client";

import { useReducedMotion as useFramerReducedMotion } from "motion/react";
import { useEffect, useState } from "react";
/**
 * Hook que detecta a preferência prefers-reduced-motion do sistema operacional.
 * Wrapper sobre o hook useReducedMotion do Framer Motion.
 *
 * @returns {boolean} true se prefers-reduced-motion está ativo, false caso contrário
 *
 * @example
 * ```tsx
 * const reducedMotion = useReducedMotion();
 *
 * return (
 *   <motion.div
 *     animate={{ opacity: 1, y: reducedMotion ? 0 : 20 }}
 *   />
 * );
 * ```
 */
export function useReducedMotion(): boolean {
  const systemPreference = useFramerReducedMotion();
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  return isMounted && systemPreference === true;
}