import { ref, readonly } from 'vue'

const orientation = ref<'portrait' | 'landscape'>('portrait')

const setupOrientationListener = () => {
    if (typeof window === 'undefined') return

    const landscapeMediaQuery = window.matchMedia('(orientation: landscape)')

    const updateOrientation = (event: MediaQueryList | MediaQueryListEvent) => {
        orientation.value = event.matches ? 'landscape' : 'portrait'
    }

    updateOrientation(landscapeMediaQuery)
    landscapeMediaQuery.addEventListener('change', updateOrientation)
}

setupOrientationListener()

export function useOrientation() {
    return {
        orientation: readonly(orientation),
    }
}