66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Stack, Typography, Button, Alert } from "@mui/material";
|
|
import Modal from "@/app/components/Modal/Modal";
|
|
import Spinner from "@/app/components/Spinner/Spinner";
|
|
import { IDeleteModalProps } from "./types";
|
|
|
|
const DeleteModal: React.FC<IDeleteModalProps> = ({
|
|
open,
|
|
onClose,
|
|
onConfirm,
|
|
resource,
|
|
resourceType = "item",
|
|
isLoading = false,
|
|
error = null,
|
|
}) => {
|
|
const handleConfirm = async () => {
|
|
if (!resource?.id) return;
|
|
await Promise.resolve(onConfirm(resource.id));
|
|
};
|
|
|
|
const handleClose = () => {
|
|
if (!isLoading) {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
const resourceLabel = resource?.label || `this ${resourceType}`;
|
|
const title = `Delete ${resourceType.charAt(0).toUpperCase() + resourceType.slice(1)}`;
|
|
|
|
return (
|
|
<Modal open={open} onClose={handleClose} title={title}>
|
|
<Stack spacing={3}>
|
|
<Typography variant="body1">
|
|
Are you sure you want to delete <strong>{resourceLabel}</strong>? This
|
|
action cannot be undone.
|
|
</Typography>
|
|
|
|
{error && (
|
|
<Alert severity="error" sx={{ mt: 1 }}>
|
|
{error}
|
|
</Alert>
|
|
)}
|
|
|
|
<Stack direction="row" spacing={2} justifyContent="flex-end">
|
|
<Button variant="outlined" onClick={handleClose} disabled={isLoading}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
color="error"
|
|
variant="contained"
|
|
onClick={handleConfirm}
|
|
disabled={isLoading || !resource?.id}
|
|
startIcon={isLoading ? <Spinner size="small" color="#fff" /> : null}
|
|
>
|
|
{isLoading ? "Deleting..." : `Delete ${resourceType}`}
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default DeleteModal;
|