import { lazy, Suspense } from "react";
import type { CharacterProfile } from "../app/types";
import type { CompanionCommand } from "../platform/dualScreenSync";
import { FrontSurface } from "./FrontSurface";

const CompanionManastormPanel = lazy(() => import("./CompanionManastormPanel").then((module) => ({
  default: module.CompanionManastormPanel,
})));

export function ShelvedCompanionPanel({
  selected,
  send,
}: {
  readonly selected: CharacterProfile | null;
  readonly send: (command: CompanionCommand) => void;
}) {
  return (
    <Suspense fallback={<FrontSurface bottom className="companion-panel" ariaLabel="Loading Manastorm companion screen"><span>Loading Manastorm data…</span></FrontSurface>}>
      <CompanionManastormPanel selected={selected} send={send} />
    </Suspense>
  );
}