import { useEffect, useState } from 'react';

// Matches the Brycord New UI MEMBER_LIST_MIN_WIDTH — below this viewport
// width the members panel is force-hidden so it doesn't squish the chat
// column. Kept in sync with the SelectionStore implementation we ported
// from: `Brycord New UI/apps/web/src/stores/SelectionStore.ts`.
const NARROW_BREAKPOINT = 1024; // px — members panel auto-hide threshold

export function useIsNarrowScreen(breakpoint = NARROW_BREAKPOINT): boolean {
	const [isNarrow, setIsNarrow] = useState(() =>
		typeof window !== 'undefined' ? window.innerWidth < breakpoint : false,
	);

	useEffect(() => {
		if (typeof window === 'undefined') return;
		const onResize = () => setIsNarrow(window.innerWidth < breakpoint);
		onResize();
		window.addEventListener('resize', onResize);
		return () => window.removeEventListener('resize', onResize);
	}, [breakpoint]);

	return isNarrow;
}
