import { FC, ReactNode } from "react";
import { DragDropContext } from "@hello-pangea/dnd";
import ServiceDragState from "@/app/services/enums/DragState";
import Droppable from "@/components/dnd-pangea/Droppable/Droppable";
import { useServicesDndContext } from "@/app/services/contexts/ServicesDndContext";

type Props = {
    children: ReactNode;
};

const ServicesTableDndWrapper: FC<Props> = ({ children }) => {
    const { onDragEnd, onDragStart, dragState } = useServicesDndContext();

    return (
        <DragDropContext
            onDragEnd={onDragEnd}
            onDragStart={onDragStart}>
            <Droppable
                droppableId={"categories"}
                isDropDisabled={dragState !== ServiceDragState.DRAG_CATEGORY}>
                {children}
            </Droppable>
        </DragDropContext>
    );
};

export default ServicesTableDndWrapper;
