import { useEffect, useRef } from "react";
import PropTypes from "prop-types";
import QRCode from "qrcode";

/**
 * Renders `url` as a QR code onto a canvas via the `qrcode` package
 * (ported from value-slideview(-filter).js's showQRCode).
 *
 * @param {Object} props
 * @param {string} props.url - URL/text to encode.
 * @param {number} [props.size=220] - Canvas width/height in px.
 */
export const QrCodeCanvas = ({ url, size = 220 }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (!canvasRef.current) return;
    QRCode.toCanvas(canvasRef.current, url, { width: size }, (error) => {
      // eslint-disable-next-line no-console
      if (error) console.error("QR code generation failed:", error);
    });
  }, [url, size]);

  return <canvas ref={canvasRef} width={size} height={size} />;
};

QrCodeCanvas.propTypes = {
  url: PropTypes.string.isRequired,
  size: PropTypes.number,
};