"use client";
import { useRef, useState } from "react";
import { DrawIoEmbed, DrawIoEmbedRef } from "react-drawio";

export default function Home() {
  const [imgData, setImgData] = useState("");
  const drawioRef = useRef<DrawIoEmbedRef>(null);
  return (
    <div className="mb-10 w-full">
      <div className={`m-auto mt-10 h-[700px] w-5/6`}>
        <DrawIoEmbed
          ref={drawioRef}
          onExport={(data) => {
            console.log(`onExport executed:
      ${JSON.stringify(data, null, 2)}`);
            setImgData(data.data);
          }}
          onClose={(data) => {
            console.log(`onClose executed:
      ${JSON.stringify(data, null, 2)}`);
          }}
        />
      </div>
      <div className="m-auto mt-10 w-fit text-xl font-bold">미리보기</div>
      {imgData ? (
        <img
          className="m-auto mt-5 rounded-lg border-2 bg-white p-5 pb-10"
          src={imgData}
          alt=""
        />
      ) : (
        <div className="h-20" />
      )}
    </div>
  );
}