"use client";

import { FC, ReactNode } from "react";
import {
    Droppable as DroppablePangea,
    DroppableProps,
} from "@hello-pangea/dnd";

type Props = Omit<DroppableProps, "children"> & {
    children: ReactNode;
};

const Droppable: FC<Props> = ({ children, ...restProps }) => (
    <DroppablePangea {...restProps}>
        {provided => (
            <div
                {...provided.droppableProps}
                ref={provided.innerRef}>
                {children}
                {provided.placeholder}
            </div>
        )}
    </DroppablePangea>
);

export default Droppable;
