import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon, PowerhouseButton } from "@powerhousedao/design-system";
import { useState } from "react";
import { DriveNameInput } from "./drive-name-input.js";
export function DeleteDrive(props) {
    const { drive, handleDeleteDrive, onCancel } = props;
    const [driveNameInput, setDriveNameInput] = useState("");
    const isAllowedToDelete = driveNameInput === drive.header.name;
    function deleteDrive() {
        if (isAllowedToDelete) {
            handleDeleteDrive();
        }
    }
    return (_jsxs("div", { children: [_jsx("p", { className: "mb-2 rounded-md bg-slate-50 p-4 text-center text-slate-200", children: "Are you sure you want to delete this drive? All files and subfolders within it will be removed. Do you want to proceed?" }), _jsx(DriveNameInput, { icon: _jsx(Icon, { name: "Lock" }), onChange: (event) => setDriveNameInput(event.target.value), placeholder: "Enter drive name...", value: driveNameInput }), _jsxs("div", { className: "flex gap-3", children: [_jsx(PowerhouseButton, { className: "w-full", color: "light", onClick: onCancel, children: "Cancel" }), _jsx(PowerhouseButton, { className: "w-full", color: "red", disabled: !isAllowedToDelete, onClick: deleteDrive, children: "Delete" })] })] }));
}
//# sourceMappingURL=delete-drive.js.map