import { useEffect, useState } from 'react';

const QUERY = '(max-width: 639px)';
const read = () => (typeof window !== 'undefined' && typeof window.matchMedia === 'function' ? window.matchMedia(QUERY).matches : false);

// True on a phone-width screen (under Tailwind's `sm`). False where matchMedia is missing (tests), so the full
// layout is what renders there.
export function useIsPhone() {
  const [phone, setPhone] = useState(read);
  useEffect(() => {
    if (typeof window.matchMedia !== 'function') return undefined;
    const mq = window.matchMedia(QUERY);
    const update = () => setPhone(mq.matches);
    update();
    mq.addEventListener?.('change', update);
    return () => mq.removeEventListener?.('change', update);
  }, []);
  return phone;
}