import dynamic from "next/dynamic";
import Script from "next/script";

const ExcalidrawWithClientOnly = dynamic(
  async () => (await import("@/components/excalidraw/excalidraw-wrapper")).default,
);

export default function Page() {
  return (
    <>
      <a href="/excalidraw-in-pages">Switch to Pages router</a>
      <h1 className="page-title">App Router</h1>
      <Script id="load-env-variables" strategy="beforeInteractive">
        {`window["EXCALIDRAW_ASSET_PATH"] = window.origin;`}
      </Script>
      <ExcalidrawWithClientOnly />
    </>
  );
}

"use client";

import { Excalidraw } from "@excalidraw/excalidraw";

import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

export const ExcalidrawWrapper = () => {
  const { theme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  return (
    <div style={{ height: "calc(100vh - 64px)", width: "100%" }}>
      <Excalidraw
        theme={theme === "dark" ? "dark" : "light"}
        initialData={{
          appState: {
            viewBackgroundColor: theme === "dark" ? "#121212" : "#ffffff",
          },
        }}
      />
    </div>
  );
};

export default ExcalidrawWrapper;