import { closestCenter, DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
import { ReactNode } from "react";

interface Props {
    ids: string[];
    handleDragEnd: (event: any) => void;
    children: ReactNode;
}

const QuestionsList: React.FC<Props> = ({ ids, handleDragEnd, children }) => {
    const sensors = useSensors(
        useSensor(PointerSensor),
    );

    return (
        <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragEnd={handleDragEnd}
        >
            <SortableContext
                items={ids}
                strategy={verticalListSortingStrategy}
            >
                <div className="space-y-4">
                    {children}
                </div>
            </SortableContext>
        </DndContext>
    );
};

export default QuestionsList;
