import { onMounted, onUnmounted, ref } from "vue"

export const breakpoints = {
	'2xs':	'320px',
	xs: 	'480px',
	sm: 	'640px',
	md: 	'768px',
	lg: 	'1024px',
	xl: 	'1280px',
	'2xl': 	'1536px',
	'3xl': 	'1920px',
	'4xl': 	'2304px'
} as const

export type Breakpoint = keyof typeof breakpoints

export function useMediaWidth( bp: Breakpoint ) {
	const matches = ref<boolean>( false )
	let media: MediaQueryList

	const query = breakpoints[ bp ]

	const update = () => {
		matches.value = media.matches
	}

	onMounted( () => {
		media = window.matchMedia( `(min-width: ${query})` )
		update()
		media.addEventListener( 'change', update )
	})

	onUnmounted( () => {
		media.removeEventListener( 'change', update )
	})

	return matches
}