import { Modal, ModalDialog, Typography, ModalClose } from "@mui/joy";
import { useTranslation } from "react-i18next";
import qrCode from "../../assets/PayPal-QR-Code.png";

interface QRcodeModalProps {
  QRmodal: boolean;
  setQRmodal: (value: boolean) => void;
}

export const QRcodeModal = (props: QRcodeModalProps) => {
  const { t } = useTranslation();

  return (
    <Modal open={props.QRmodal}>
      <ModalDialog color="primary" layout="center" size="lg">
        <ModalClose onClick={() => props.setQRmodal(false)} />
        <Typography>{t("qr-text")}</Typography>
        <img
          src={qrCode}
          alt="PayPal QR Code"
          style={{
            width: "100%",
            height: "auto",
            maxHeight: "70vh",
            objectFit: "contain",
          }}
        />
      </ModalDialog>
    </Modal>
  );
};