'use client'

import { useState } from 'react'
import WithDraggable from '@/components/common/draggable/withDraggable'

export default function DraggablePage() {
  const [divIsShow, setDivIsShow] = useState(true)

  return (
    <>
      {!divIsShow ? <button onClick={() => setDivIsShow(true)}>show draggable div</button> : ''}
      {/* WithDraggable 태그로 이동하고 싶은 컴포넌트나 엘리먼트등을 감싸주면 WithDraggable 컴포넌트가 드래그 가능하게 만들어줍니다. */}
      <WithDraggable isShow={divIsShow} handle='.modal'>
        <div style={{ width: '200px', height: '200px', margin: '5px', padding: '5px', background: '#00ffee' }}>
          <h1 className='modal'>test draggable div</h1>
          <div>
            <button onClick={() => setDivIsShow(false)}>close</button>
          </div>
        </div>
      </WithDraggable>
    </>
  )
}
