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

type Props = {
    id: number | string;
    children: ReactNode;
    style?: CSSProperties;
    disabled?: boolean;
};

const DragHandle = ({ id, children, style, disabled }: Props) => {
    const { attributes, listeners, setNodeRef } = useDraggable({
        id,
        disabled,
    });

    return (
        <div
            {...attributes}
            {...listeners}
            onTouchStart={e => !disabled && e.stopPropagation()}
            onTouchMove={e => !disabled && e.stopPropagation()}
            style={{
                width: "100wv",
                cursor: disabled ? "default" : "grab",
                touchAction: disabled ? "auto" : "none",
                ...style,
            }}
            ref={setNodeRef}>
            {children}
        </div>
    );
};

export default DragHandle;