import { useState, useEffect } from 'react';

/**
 * Hook que indica si el ancho del viewport es menor o igual al breakpoint dado (en px).
 * Útil para saber cuándo mostrar versión mobile o mostrar/ocultar componentes.
 * @param {number} breakpointPx - Ancho en px: viewport <= este valor → true
 * @returns {boolean}
 */
export function useViewportMaxWidth(breakpointPx) {
  const [matches, setMatches] = useState(() =>
    typeof window !== 'undefined'
      ? window.matchMedia(`(max-width: ${breakpointPx}px)`).matches
      : false
  );

  useEffect(() => {
    if (typeof window === 'undefined' || breakpointPx == null) return;
    const mql = window.matchMedia(`(max-width: ${breakpointPx}px)`);
    const handle = () => setMatches(mql.matches);
    handle();
    mql.addEventListener('change', handle);
    return () => mql.removeEventListener('change', handle);
  }, [breakpointPx]);

  return matches;
}

export default useViewportMaxWidth;
