import { getNineSliceStyle, UI_CHROME } from '../../uiAssets';

/**
 * RPG 运行态模态加载占位。
 * 第三批收口后真实落点迁入 `rpg-runtime-shell`。
 */
export function ModalLoadingFallback({
  label,
  onClose,
}: {
  label: string;
  onClose?: (() => void) | null;
}) {
  return (
    <div
      className="fixed inset-0 z-[90] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm"
      onClick={onClose ?? undefined}
    >
      <div
        className="pixel-nine-slice pixel-modal-shell flex min-h-40 w-full max-w-md items-center justify-center px-6 py-8 text-center text-sm text-zinc-300 shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
        style={getNineSliceStyle(UI_CHROME.modalPanel)}
        onClick={(event) => event.stopPropagation()}
      >
        {label}
      </div>
    </div>
  );
}

/**
 * RPG 运行态面板加载占位。
 * 仅迁移命名落点，不改 UI 表现。
 */
export function PanelLoadingFallback({
  label,
}: {
  label: string;
}) {
  return (
    <div
      className="pixel-nine-slice flex min-h-0 flex-1 items-center justify-center px-4 py-6 text-center text-xs uppercase tracking-[0.24em] text-zinc-500"
      style={getNineSliceStyle(UI_CHROME.modalPanel)}
    >
      {label}
    </div>
  );
}