import React, { useCallback } from "react";

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

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

export interface CardCloseButtonProps {
  label?: string;
  onClick?: () => void;
}

export const CardCloseButton: React.FC<CardCloseButtonProps> = ({ label = "close", onClick }) => {
  const { setIsEditing } = useCardContext();
  const { t } = useI18n();

  const handleOnClick = useCallback(() => {
    onClick?.();
    setIsEditing(false);
  }, [onClick, setIsEditing]);

  return (
    <Button size="medium" variant="outlined" onClick={handleOnClick}>
      {t(label)}
    </Button>
  );
};

export default CardCloseButton;