import React, { CSSProperties, ReactNode, useContext } from "react";
import SortableItemContext from "@/components/SortableDnd/SortableItemContext";

type Props = {
    children: ReactNode;
    style?: CSSProperties;
};

const DragHandle = ({ children, style }: Props) => {
    const { attributes, listeners, ref } = useContext(SortableItemContext);

    return (
        <div
            {...attributes}
            {...listeners}
            style={{
                width: "100%",
                cursor: "grab",
                ...style,
            }}
            ref={ref}>
            {children}
        </div>
    );
};

export default DragHandle;