import { Button, CircularProgress } from "@mui/material";

export const SnapshotRestore = ({
  onDelete,
  onCancel,
  open,
  loading = false,
}: {
  onDelete: () => void;
  onCancel: () => void;
  open: boolean;
  loading?: boolean;
}) => {
  return (
    <div
      className={`fixed  top-0 left-0 w-screen h-screen  flex justify-center items-center z-10000 bg-black/30 transition-all duration-300 ${
        open ? "block" : "hidden"
      }`}
    >
      <div className="bg-white p-4 w-140 rounded-lg flex flex-col gap-4 items-center">
        <p className="text-black w-110 text-center">
          Вы уверены, что хотите восстановить этот снапшот?
        </p>
        <p className="text-black w-100 text-center">
          Это действие нельзя будет отменить.
        </p>
        <div className="flex gap-4 justify-center">
          <Button
            variant="contained"
            color="primary"
            onClick={onDelete}
            disabled={loading}
            startIcon={
              loading ? (
                <CircularProgress size={16} color="inherit" />
              ) : undefined
            }
          >
            {loading ? "Восстановление..." : "Да"}
          </Button>
          <Button onClick={onCancel} disabled={loading}>
            Нет
          </Button>
        </div>
      </div>
    </div>
  );
};