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

export default function QrImg({ onReady, size = 168 }) {
  const [qrCodeData, setQrCodeData] = useState("");

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

    if (fullUrl) {
      QRCode.toDataURL(fullUrl, { margin: 1, width: size * 2 }).then((url) => {
        setQrCodeData(url);
        onReady?.();
      });
    } else {
      onReady?.();
    }
  }, [onReady, size]);

  return qrCodeData ? (
    <img
      src={qrCodeData}
      width={size}
      height={size}
      alt="کد QR پروفایل پزشک"
      style={{ width: size, height: size, display: "block" }}
    />
  ) : (
    <div style={{ width: size, height: size }} />
  );
}