import { MobileShell } from "./mobile-shell";

export interface PageLoadingFallbackProps {
  children: string;
  background?: string;
  tone?: "neutral" | "dark" | "warm";
}

export function PageLoadingFallback({
  children,
  background,
  tone = "neutral",
}: PageLoadingFallbackProps) {
  const toneClass = {
    neutral: "text-[#666]",
    dark: "text-[rgba(255,255,255,0.72)]",
    warm: "text-[#8b6265]",
  }[tone];

  return (
    <MobileShell background={background}>
      <div className={`grid min-h-[60vh] place-items-center p-8 text-center ${toneClass}`}>
        {children}
      </div>
    </MobileShell>
  );
}