import React, { FC, ReactNode } from "react";
import { useDroppable } from "@dnd-kit/core";

type Props = {
    children: ReactNode;
}

const Droppable: FC<Props> = ({ children }) => {
    const { isOver, setNodeRef } = useDroppable({
        id: "droppable",
    });
    const style = {
        color: isOver ? "green" : undefined,
    };

    return (
        <div
            ref={setNodeRef}
            style={style}>
            {children}
        </div>
    );
}

export default Droppable;
