import { jsx as _jsx } from "react/jsx-runtime";
import cx from "classnames";
import { FormattedMessage } from "react-intl";
import { getDropZoneDebugStyle } from "./debug.js";
import { useFilterDeleteDrop } from "./useFilterDeleteDrop.js";
export function DeleteDropZone() {
    const [{ canDrop, isOver }, dropRef] = useFilterDeleteDrop();
    if (!canDrop) {
        return null;
    }
    const className = cx("gd-dropzone", "gd-dropzone-delete", {
        "gd-dropzone-over": isOver,
    });
    const debugStyle = getDropZoneDebugStyle({ isOver });
    return (_jsx("div", { className: className, ref: dropRef, style: debugStyle, children: _jsx("div", { className: "gd-dropzone-message", children: _jsx(FormattedMessage, { id: "addPanel.deleteItem" }) }) }));
}
