import { lazy, Suspense } from "react";
import { Loader2 } from "lucide-react";
import type { EditorProps } from "@monaco-editor/react";

const MonacoEditor = lazy(() => import("@monaco-editor/react"));

function EditorFallback({ height }: { height?: string | number }) {
  return (
    <div
      className="flex items-center justify-center bg-[#1e1e1e] rounded-md"
      style={{ height: height ?? 300 }}
    >
      <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
    </div>
  );
}

export default function LazyMonacoEditor(props: EditorProps) {
  return (
    <Suspense fallback={<EditorFallback height={props.height} />}>
      <MonacoEditor {...props} />
    </Suspense>
  );
}