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

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,
    });
    const isMobile = useIsMobile();

    return (
        <div
            {...attributes}
            {...listeners}
            style={{
                width: "100wv",
                cursor: disabled ? "default" : "grab",
                touchAction: "auto",
                ...style,
            }}
            className={isMobile ? "" : "swiper-no-swiping"}
            ref={setNodeRef}>
            {children}
        </div>
    );
};

export default DragHandle;
