import { DESIGN_WIDTH } from '@/constants/app'

/** px to vw */
const useVW = (px: string | number): `${number}vw` => {
  const pixel = `${px}`.replace(/px$/, '')
  return `${-((-pixel / DESIGN_WIDTH) * 100).toFixed(5)}vw`
}

export const usePX = (px: string | number): `${number}px` => {
  const pixel = `${px}`.replace(/px$/, '')
  return `${+pixel * (document.documentElement.clientWidth / DESIGN_WIDTH)}px`
}

export default useVW
