import React from "react";

import Button from "@mui/material/Button";

import { useCardContext } from "../../../../contexts/CardContext";
import { useI18n } from "../../../../contexts/I18nContext";

export interface CancelOrderButtonProps {
  isPending: boolean;
  onClick: () => void;
}

export const CancelOrderButton: React.FC<CancelOrderButtonProps> = ({ isPending, onClick }) => {
  const { isEditing } = useCardContext();
  const { t } = useI18n();
  return isEditing && isPending ? (
    <Button color="error" size="medium" variant="outlined" onClick={onClick}>
      {t("Cancel order")}
    </Button>
  ) : null;
};

export default CancelOrderButton;