import { reactive } from '#shared/reactive';

export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';

const breakpoints = [
	{ name: 'sm',  query: '(min-width: 640px)' },
	{ name: 'md',  query: '(min-width: 768px)' },
	{ name: 'lg',  query: '(min-width: 1024px)' },
	{ name: 'xl',  query: '(min-width: 1280px)' },
	{ name: '2xl', query: '(min-width: 1536px)' },
];

export const breakpoint = reactive({ current: 'lg' as Breakpoint });

if (typeof window !== 'undefined') {
	const updateBreakpoint = () => {
		for (let i = breakpoints.length - 1; i >= 0; i--)
			if (window.matchMedia(breakpoints[i]!.query).matches)
				{ breakpoint.current = breakpoints[i]!.name as Breakpoint; break; }
	};

	updateBreakpoint();
	breakpoints.forEach(b => window.matchMedia(b.query).addEventListener('change', updateBreakpoint));
}