import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Icon, Modal } from "@powerhousedao/design-system";
import { memo, useCallback } from "react";
import { tableLabels } from "../constants/names.js";
export const RWADeleteItemModal = memo(function RWADeleteItemModal(props) {
    const { tableName, dependentItemProps, onOpenChange, open } = props;
    const tableLabel = tableLabels[tableName].toLowerCase();
    const handleCancel = useCallback(() => {
        onOpenChange?.(false);
    }, [onOpenChange]);
    return (_jsx(Modal, { contentProps: {
            className: "rounded-3xl",
        }, onOpenChange: onOpenChange, open: open, overlayProps: {
            className: "top-10",
        }, children: _jsxs("div", { className: "w-[400px] p-6 text-slate-300", children: [_jsxs("div", { className: "border-b border-slate-50 pb-2 text-2xl font-bold text-gray-800", children: ["Cannot delete ", tableName] }), _jsxs("div", { className: "my-6 flex gap-2 rounded-md bg-orange-100 p-4 text-orange-800", children: [_jsx("div", { children: _jsx(Icon, { className: "mt-1 text-orange-800", name: "Error" }) }), _jsxs("div", { children: ["Warning! Cannot delete this ", tableLabel, " because there are items that depend on it. Please change or delete those first."] })] }), _jsx("div", { className: "my-6 rounded-md bg-slate-50 p-4 text-slate-200", children: dependentItemProps.map(({ dependentTableName, dependentItems }) => (_jsxs("div", { children: [_jsx("div", { className: "mb-0.5 font-semibold", children: `${tableLabels[dependentTableName]}s: ` }, 1), dependentItems.map(({ id, label }) => (_jsx("div", { children: label }, id)))] }, dependentTableName))) }), _jsx("div", { className: "mt-8 flex justify-between gap-3", children: _jsx("button", { className: "min-h-12 min-w-36 flex-1 rounded-xl bg-gray-800 px-6 py-3 text-base font-semibold text-gray-50 outline-none transition-all hover:scale-105 active:opacity-75", onClick: handleCancel, children: "Back" }) })] }) }));
});
//# sourceMappingURL=delete-item-modal.js.map