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

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

  useEffect(() => {
    const info = getStateInfoClient();
    const linkHost = info.host;
    const linkURL = info.fullUrl;

    setHost(linkHost);

    if (linkURL) {
      QRCode.toDataURL(linkURL).then((url) => {
        setQrCodeData(url);
        onReady?.();
      });
    } else {
      onReady?.();
    }
  }, [onReady]);

  return (
    <div className="flex items-center flex-col justify-center mt-[100%]">
      {qrCodeData ? (
        <img src={qrCodeData} width={167} height={167} alt="کد QR پروفایل پزشک" />
      ) : (
        <p>در حال بارگذاری...</p>
      )}
      <p className="text-[#3987D4] min-h-[24px] font-semibold text-[16px] mt-[32px]">
        {host || ""}
      </p>
    </div>
  );
}