import { useEffect, useRef, useState } from 'react';

interface QRCodeCanvasProps {
  value: string;
  size?: number;
  level?: 'L' | 'M' | 'Q' | 'H';
  className?: string;
}

export function QRCodeCanvas({ value, size = 256, level = 'M', className }: QRCodeCanvasProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (!canvasRef.current || !value || value.length < 4) return;
    const el = canvasRef.current;

    // Lazy import to avoid crashing at module load in restricted environments
    import('qrcode').then((mod) => {
      try {
        mod.default.toCanvas(el, value, {
          width: size,
          margin: 1,
          errorCorrectionLevel: level,
        });
      } catch {
        // silently skip
      }
    }).catch(() => {
      // qrcode unavailable in this environment
    });
  }, [value, size, level]);

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