// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useMemo, type ComponentProps } from "react";
import QRCode from "./_ynrlib/qr-code.js";
export type QRCodeProps = ComponentProps<"div"> & {
  value: string;
  label?: string;
  errorCorrectionLevel?: "L" | "M" | "Q" | "H";
};
export function QRCodeImage({
  value,
  label = "QR code",
  errorCorrectionLevel = "M",
  className = "",
  ...props
}: QRCodeProps) {
  const result = useMemo(() => {
    try {
      return { code: QRCode.create(value, { errorCorrectionLevel }) };
    } catch {
      return { error: "Unable to encode this value." };
    }
  }, [value, errorCorrectionLevel]);
  const matrix = result.code?.modules;
  const size = matrix?.size ?? 0;
  let path = "";
  if (matrix)
    for (let row = 0; row < size; row++)
      for (let col = 0; col < size; col++)
        if (matrix.get(row, col)) path += `M${col + 4} ${row + 4}h1v1h-1z`;
  return (
    <div className={`ynr-qr-code ${className}`} {...props}>
      {matrix ? (
        <svg
          role="img"
          aria-label={label}
          viewBox={`0 0 ${size + 8} ${size + 8}`}
          shapeRendering="crispEdges"
        >
          <rect
            width={size + 8}
            height={size + 8}
            fill="var(--qr-code-background,white)"
          />
          <path d={path} fill="var(--qr-code-foreground,black)" />
        </svg>
      ) : (
        <p role="status">{result.error}</p>
      )}
    </div>
  );
}