'use client'

import { useState } from 'react'
import Draggable from 'react-draggable'
import PopSpinner from '../spinner/PopSpiner'

export default function WithDraggable({ isShow, handle = '', children, size }) {
  const [position, setPosition] = useState({ x: 0, y: 0 })

  const handleOnDrag = (data) => {
    setPosition({ x: data.x, y: data.y })
  }

  return (
    <>
      {isShow && (
        <Draggable
          position={{ x: position.x, y: position.y }}
          onDrag={(_, data) => handleOnDrag(data)}
          handle={handle === '' ? '.handle' : handle}
        >
          <div className={`modal-pop-wrap ${size}`}>
            {children}
            {/* <PopSpinner/> */}
          </div>
        </Draggable>
      )}
    </>
  )
}
