"use client"

import * as motion from "motion/react-client"
import { useRef } from "react"

export default function Drag() {
    const constraintsRef = useRef<HTMLDivElement>(null)

    return (
        <>
            <motion.div
                className="drag-area"
                ref={constraintsRef}
                style={constraints}
            >
                <motion.div drag dragConstraints={constraintsRef} style={box} />
            </motion.div>
        </>
    )
}

/**
 * ==============   Styles   ================
 */

const constraints = {
    width: 300,
    height: 300,
    backgroundColor: "var(--hue-1-transparent)",
    borderRadius: 10,
}

const box = {
    width: 100,
    height: 100,
    backgroundColor: "var(--hue-1)",
    borderRadius: 10,
}