import { useRef, useEffect } from "react";
import QRCode from "qrcode";
import { getStateInfoClient } from "@/lib/getStateInfoClient";

export default function QrImg({ onReady, size = 168 }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const { fullUrl } = getStateInfoClient();

    if (fullUrl && canvasRef.current) {
      QRCode.toCanvas(
        canvasRef.current,
        fullUrl,
        { width: size, margin: 1, color: { dark: "#0B2A4A", light: "#ffffff" } },
        () => onReady?.()
      );
    } else {
      onReady?.();
    }
  }, [onReady, size]);

  return (
    <canvas
      ref={canvasRef}
      width={size}
      height={size}
      style={{ width: size, height: size, display: "block" }}
    />
  );
}