"use client"
import Image from "next/image"
import Link from "next/link"
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 (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <Link
          href="/"
          className="bg-blue-500 p-2 rounded-md text-white cursor-pointer"
        >
          Home
        </Link>
        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
          <a
            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            By{" "}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className="dark:invert"
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>
      <div className={`w-5/6 m-auto mt-10 h-[700px]`}>
        <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 w-fit font-bold text-xl mt-10">미리보기</div>
      {imgData && (
        <img
          className="m-auto mt-5 pb-10 bg-white p-5 border-2 rounded-lg"
          src={imgData}
          alt=""
        />
      )}
    </main>
  )
}