"use client";
import { Unity, useUnityContext } from "react-unity-webgl";

export default function Home() {
  const { unityProvider, isLoaded, loadingProgression } = useUnityContext({
    loaderUrl: "/unity/test-project/build.loader.js",
    dataUrl: "/unity/test-project/build.data",
    frameworkUrl: "/unity/test-project/build.framework.js",
    codeUrl: "/unity/test-project/build.wasm",
  });

  // We'll round the loading progression to a whole number to represent the
  // percentage of the Unity Application that has loaded.
  const loadingPercentage = Math.round(loadingProgression * 100);

  return (
    <>
      <div className="mb-5 mt-5">
        새 Unity 프로젝트를 생성하고, WebGL로 빌드 후 빌드 산출물을
        react-unity-webgl 라이브러리를 통해 실행했다.
      </div>
      <div className="relative h-[600px] w-[800px]">
        {isLoaded === false && (
          // We'll conditionally render the loading overlay if the Unity
          // Application is not loaded.
          <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-gray-500">
            <p>Loading... ({loadingPercentage}%)</p>
          </div>
        )}
        <Unity className="h-full w-full" unityProvider={unityProvider} />
      </div>
    </>
  );
}