import React, { FC, ReactNode } from "react";
import { useDraggable } from "@dnd-kit/core";

type Props = {
    children: ReactNode;
};

const Draggable: FC<Props> = props => {
    const { attributes, listeners, setNodeRef, transform } = useDraggable({
        id: "draggable",
    });

    const style = transform
        ? {
              transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
          }
        : undefined;

    return (
        <div
            ref={setNodeRef}
            style={style}
            {...listeners}
            {...attributes}>
            {props.children}
        </div>
    );
};

export default Draggable;
