"use client";

import dynamic from "next/dynamic";
import type { ComponentType } from "react";
import type { DocumentEditorHostProps } from "@/components/editor/editor-host-types";

const LeptosTiptapIslandEditor = dynamic(
  () =>
    import("@/components/editor/leptos-tiptap-island-editor-host").then(
      (mod) => mod.LeptosTiptapIslandEditorHost,
    ),
  {
    ssr: false,
    loading: () => (
      <div className="flex h-64 items-center justify-center text-sm text-gray-400">编辑器加载中...</div>
    ),
  },
) as ComponentType<DocumentEditorHostProps>;

const LeptosTiptapIframeDebugEditor = dynamic(
  () => import("@/components/editor/leptos-tiptap-editor-host").then((mod) => mod.LeptosTiptapEditorHost),
  {
    ssr: false,
    loading: () => (
      <div className="flex h-64 items-center justify-center text-sm text-gray-400">编辑器加载中...</div>
    ),
  },
) as ComponentType<DocumentEditorHostProps>;

export function EditorHost(props: DocumentEditorHostProps) {
  if (props.hostKind === "leptos_tiptap_iframe_debug") {
    return <LeptosTiptapIframeDebugEditor {...props} />;
  }
  return <LeptosTiptapIslandEditor {...props} />;
}
