import { FC } from "react";
import InnerServicesTable from "@/app/services/components/shared/ServicesTable/components/InnerServicesTable";
import { useServicesDndContext } from "@/app/services/contexts/ServicesDndContext";
import ServiceDragState from "@/app/services/enums/DragState";
import Droppable from "@/components/dnd-pangea/Droppable/Droppable";
import { ServiceSchema } from "@/lib/client";

type Props = {
    services: ServiceSchema[];
    categoryId: number;
};

const InnerServicesTableDndWrapper: FC<Props> = ({ services, categoryId }) => {
    const { dragState } = useServicesDndContext();

    return (
        <Droppable
            droppableId={`services-${categoryId}`}
            isDropDisabled={dragState !== ServiceDragState.DRAG_SERVICE}>
            <InnerServicesTable
                services={services}
                categoryId={categoryId}
            />
        </Droppable>
    );
};

export default InnerServicesTableDndWrapper;
