import { readSavedSettings } from '../persistence/gameSettingsStorage';

function resolveRouteLoadingPlatformThemeClass() {
  // 中文注释：路由级等待态早于 AuthUiContext 挂载，只能从本地设置读取平台主题。
  return readSavedSettings().platformTheme === 'dark'
    ? 'platform-theme--dark'
    : 'platform-theme--light';
}

export function RouteLoadingScreen({
  eyebrow,
  text,
}: {
  eyebrow: string;
  text: string;
}) {
  const platformThemeClass = resolveRouteLoadingPlatformThemeClass();

  return (
    <div
      className={`platform-ui-shell platform-theme ${platformThemeClass} flex min-h-screen items-center justify-center bg-[image:var(--platform-body-fill)] px-6 text-[var(--platform-text-base)]`}
    >
      <div className="text-center">
        <div className="text-sm tracking-[0.26em] text-[var(--platform-text-soft)]">
          {eyebrow}
        </div>
        <div className="mt-3 text-lg font-semibold text-[var(--platform-text-strong)]">
          {text}
        </div>
      </div>
    </div>
  );
}