'use client'

import { useEffect, useState } from 'react'
import Draggable from 'react-draggable'

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

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

  useEffect(() => {
    setPosition({ ...pos })
  }, [])

  return (
    <>
      {isShow && (
        <Draggable position={{ x: position.x, y: position.y }} onDrag={(_, data) => handleOnDrag(data)}>
          {children}
        </Draggable>
      )}
    </>
  )
}