import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { useState } from "react";
import { FormInput } from "../form-input/form-input.js";
import { ConnectConfirmationModal } from "./confirmation-modal.js";
export const ConnectDeleteDriveModal = (props) => {
    const { inputPlaceholder, body, driveName, ...confirmationModalProps } = props;
    const [inputName, setInputName] = useState("");
    return (_jsx(ConnectConfirmationModal, { bodyProps: { className: "p-0 bg-white my-0" }, containerProps: { className: "w-[450px]" }, continueButtonProps: {
            disabled: inputName !== driveName,
            className: inputName !== driveName
                ? "bg-red-600 hover:scale-100 cursor-not-allowed active:opacity-100"
                : "bg-red-900",
        }, ...confirmationModalProps, children: _jsxs("div", { children: [_jsx("div", { className: "my-6 rounded-md bg-slate-50 p-4 text-center", children: body }), _jsx("div", { children: _jsx(FormInput, { hideErrors: true, icon: _jsx(Icon, { name: "Lock" }), onChange: (e) => setInputName(e.target.value), placeholder: inputPlaceholder, value: inputName }) })] }) }));
};
//# sourceMappingURL=delete-drive-modal.js.map