import React,{useRef} from 'react';
import {QRCodeCanvas} from 'qrcode.react'

export function App(props) {
  const divRef = useRef(null);
  const download = () => {
    const node = divRef.current?.children[0];
    if (node == null) {
      return;
    }
    const dataURI = node.toDataURL('image/png');

    let a = document.createElement('a');
    a.download = 'qrcode-canvas.png';
    a.href = dataURI;
    a.click();
  };
  return (
      <div className='App'>
        <h1>Hello React.</h1>
        <div className={'mx-auto pt-2'} ref={divRef}>
          <QRCodeCanvas value={"https://playcode.io/react"} />
        </div>
        <div className='mx-auto pt-2'>
          <button  onClick={download}>
            Download
          </button>
        </div>
      </div>
  );
}

// Log to console
console.log('Hello console');