import {useEffect, useState} from "react"
import {DEVICE_SIZE} from "../utils"

export const useResize = () => {
  const [resized, onResize] = useState({
    isDesktop: typeof window !== "undefined" ? window.innerWidth > DEVICE_SIZE.mobile : false,
  })

  useEffect(() => {
    if (typeof window !== "undefined") {
      onResize({
        isDesktop: window.innerWidth > DEVICE_SIZE.mobile,
      })

      const handleResize = () => {
        onResize(prev => ({
          ...prev,
          isDesktop: window.innerWidth > DEVICE_SIZE.mobile,
        }))
      }

      window.addEventListener("resize", handleResize)

      return () => window.removeEventListener("resize", handleResize)
    }
  }, [])

  return resized
}