import { useEffect, useState } from 'react';

export function useIsMobile(breakpoint = 860): boolean {
  const [isMobile, setIsMobile] = useState<boolean>(() => {
    if (typeof window === 'undefined') return false;
    return (
      window.innerWidth <= breakpoint ||
      (typeof window.matchMedia === 'function' && window.matchMedia(`(max-width: ${breakpoint}px)`).matches) ||
      (typeof navigator !== 'undefined' && /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent))
    );
  });

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const mq = typeof window.matchMedia === 'function' ? window.matchMedia(`(max-width: ${breakpoint}px)`) : null;
    const check = () => {
      setIsMobile(
        window.innerWidth <= breakpoint ||
        (mq ? mq.matches : false) ||
        (typeof navigator !== 'undefined' && /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent))
      );
    };

    check();
    window.addEventListener('resize', check);
    if (mq) {
      if (typeof mq.addEventListener === 'function') {
        mq.addEventListener('change', check);
      } else if (typeof mq.addListener === 'function') {
        mq.addListener(check);
      }
    }
    return () => {
      window.removeEventListener('resize', check);
      if (mq) {
        if (typeof mq.removeEventListener === 'function') {
          mq.removeEventListener('change', check);
        } else if (typeof mq.removeListener === 'function') {
          mq.removeListener(check);
        }
      }
    };
  }, [breakpoint]);

  return isMobile;
}