"use client";

import dynamic from "next/dynamic";
import { Skeleton } from "@/components/ui/skeleton";
import type { GuideSectionEditorProps } from "./editors/shared";

function EditorLoading() {
  return <Skeleton className="h-64 w-full" aria-label="Loading editor" />;
}

const WeaponEditor = dynamic(() => import("./editors/weapon-editor").then((module) => module.WeaponEditor), { loading: EditorLoading });
const ArtifactEditor = dynamic(() => import("./editors/artifact-editor").then((module) => module.ArtifactEditor), { loading: EditorLoading });
const ConstellationEditor = dynamic(() => import("./editors/constellation-editor").then((module) => module.ConstellationEditor), { loading: EditorLoading });
const TeamEditor = dynamic(() => import("./editors/team-editor").then((module) => module.TeamEditor), { loading: EditorLoading });
const ExtraEditor = dynamic(() => import("./editors/extra-editor").then((module) => module.ExtraEditor), { loading: EditorLoading });

export function GuideSectionEditor(props: GuideSectionEditorProps) {
  return (
    <div className="flex flex-col gap-6">
      {props.section === "weapon" ? <WeaponEditor {...props} /> : null}
      {props.section === "artifact" ? <ArtifactEditor {...props} /> : null}
      {props.section === "constellations" ? <ConstellationEditor {...props} /> : null}
      {props.section === "team" ? <TeamEditor {...props} /> : null}
      {props.section === "extra" ? <ExtraEditor {...props} /> : null}
    </div>
  );
}