import QRCode from 'qrcode'
import { useMemo } from 'react'

/** QR code as crisp SVG squares (prints sharply at any size). */
export function QrCode({ value, size = 160, label }: { value: string; size?: number; label: string }) {
  const { path, count } = useMemo(() => {
    const { modules } = QRCode.create(value, { errorCorrectionLevel: 'M' })
    let d = ''
    for (let y = 0; y < modules.size; y++) for (let x = 0; x < modules.size; x++) if (modules.get(x, y)) d += `M${x} ${y}h1v1h-1z`
    return { path: d, count: modules.size }
  }, [value])
  const margin = 2
  return (
    <svg width={size} height={size} viewBox={`${-margin} ${-margin} ${count + margin * 2} ${count + margin * 2}`} role="img" aria-label={label} shapeRendering="crispEdges">
      <rect x={-margin} y={-margin} width={count + margin * 2} height={count + margin * 2} fill="#fff" />
      <path d={path} fill="#000" />
    </svg>
  )
}