import { useEffect, useRef } from 'react';
import QRCode from 'qrcode';

export function LanDownloadQR({ url }: { url: string }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (!canvasRef.current || !url) return;
    QRCode.toCanvas(canvasRef.current, url, { width: 120, margin: 1 }).catch(console.error);
  }, [url]);

  if (!url) return null;

  return (
    <div className="qr-wrap" title={url}>
      <canvas ref={canvasRef} />
    </div>
  );
}
