import { useWindowSize } from '@vueuse/core'
import { viewports } from '@/libs/theme'

const { width: wWidth, height: wHeight } = useWindowSize()

export default () => {
    // Desktop
    const dvw = (pixels) => {
        return (pixels / viewports.desktop.width) * wWidth.value
    }
    const dvh = (pixels) => {
        return (pixels / viewports.desktop.height) * wHeight.value
    }

    // Mobile
    const mvw = (pixels) => {
        return (pixels / viewports.mobile.width) * wWidth.value
    }
    const mvh = (pixels) => {
        return (pixels / viewports.mobile.height) * wHeight.value
    }

    return {
        dvw,
        dvh,
        mvw,
        mvh,
    }
}