import QRCode from "qrcode";
import { useEffect, useState } from "react";

interface IProps {
  value: string;
  style?: React.CSSProperties;
  className?: string;
  options?: QRCode.QRCodeToDataURLOptions;
}

export default function QrCode({
  value,
  style,
  className = "",
  options,
}: IProps) {
  const [imgSrc, setImgSrc] = useState("");

  useEffect(() => {
    if (!value) return;
    QRCode.toDataURL(value, options).then((res) => {
      setImgSrc(res);
    });
  }, [value, options]);

  return <img src={imgSrc} style={{ ...style }} className={className} alt="" />;
}
