import { useEffect, useState } from "react";

// Detecta si el viewport es estrecho (móvil) consultando matchMedia, para
// adaptar la presentación de la pasarela (panel a pantalla casi completa).
export default function useEsMovil(query = "(max-width: 600px)") {
  const [esMovil, setEsMovil] = useState(
    () => typeof window !== "undefined" && window.matchMedia && window.matchMedia(query).matches,
  );

  useEffect(() => {
    if (!window.matchMedia) return;
    const mq = window.matchMedia(query);
    const escuchar = (e) => setEsMovil(e.matches);
    setEsMovil(mq.matches);
    if (mq.addEventListener) {
      mq.addEventListener("change", escuchar);
      return () => mq.removeEventListener("change", escuchar);
    }
    // Safari antiguo
    mq.addListener(escuchar);
    return () => mq.removeListener(escuchar);
  }, [query]);

  return esMovil;
}