import { useState } from 'react';

// A QR code, drawn by the one public image service the landing already used:
// no QR library and no extra bytes in the bundle. `url` is the whole payload —
// whatever the phone reads on a scan is exactly this string.
// ponytail: a remote image means a third-party request and a blank frame while
// it loads. Render the matrix in-bundle only if the QR must work offline.
export function QrCode({ url, size = 180, className }: { url: string; size?: number; className?: string }) {
  const [ok, setOk] = useState(true);
  if (!ok) return null;
  // `crossOrigin`: the page is cross-origin isolated (COEP), which rejects a
  // cross-origin image unless it opted in with CORS — qrserver answers `*`.
  return (
    <img
      className={className}
      width={size}
      height={size}
      alt=""
      loading="lazy"
      referrerPolicy="no-referrer"
      crossOrigin="anonymous"
      onError={() => setOk(false)}
      src={`https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(url)}`}
    />
  );
}