import { useEffect, useState } from 'react'

const DesktopView = ({ children }) => {
  const [view, setView] = useState(<></>)

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 768) {
        setView(children)
      } else {
        setView(<></>)
      }
    }

    handleResize()
    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [children])

  return view
}

export default DesktopView