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

export function useDevice() {
	const innerWidth = ref(window.innerWidth)
	const isMobile = ref(window.innerWidth < 768)
	const scrollY = ref(window.scrollY)
	const scrollX = ref(window.scrollX)
	const innerHeight = ref(window.innerHeight)

	function updateDeviceInfo() {
		innerWidth.value = window.innerWidth
		isMobile.value = window.innerWidth < 768
		scrollY.value = window.scrollY
		scrollX.value = window.scrollX
		innerHeight.value = window.innerHeight
	}

	onMounted(() => {
		window.addEventListener('resize', updateDeviceInfo)
		window.addEventListener('scroll', updateDeviceInfo)
		updateDeviceInfo()
	})

	onUnmounted(() => {
		window.removeEventListener('resize', updateDeviceInfo)
		window.removeEventListener('scroll', updateDeviceInfo)
	})

	return {
		innerWidth,
		isMobile,
		scrollY,
		scrollX,
		innerHeight,
	}
}
