/**
 * @file usePrefersReducedMotion.ts
 * @description The OS "reduce motion" preference, followed live. Its own
 * module so a settings screen can read it without importing the pet overlay
 * (`components/Sagi/Sagi.tsx`), whose chat and pane UI would otherwise be
 * pulled into every page's first bundle.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useEffect, useState } from "react";

/** The OS "reduce motion" preference, followed live. */
export function usePrefersReducedMotion(): boolean {
  const [reduced, setReduced] = useState(
    () =>
      typeof window !== "undefined" &&
      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
  );
  useEffect(() => {
    const mq = window.matchMedia?.("(prefers-reduced-motion: reduce)");
    if (!mq) return;
    const onChange = () => setReduced(mq.matches);
    mq.addEventListener?.("change", onChange);
    return () => mq.removeEventListener?.("change", onChange);
  }, []);
  return reduced;
}