import type { ReactNode } from "react";

import { OfflineBanner } from "@/components/offline-banner";
import {
  playerSafeAreaTopClass,
  playerViewportOuterClass,
  playerViewportRootClass,
} from "@/lib/player-viewport";
import { cn } from "@/lib/utils";

type PlayerMobileViewportProps = {
  children: ReactNode;
  className?: string;
};

/**
 * 玩家端根容器：移动居中 480px 画布；桌面全宽并配合侧栏壳层（见 UI 设计稿）。
 */
export function PlayerMobileViewport({
  children,
  className,
}: PlayerMobileViewportProps): ReactNode {
  return (
    <div className={playerViewportOuterClass}>
      <div
        className={cn(playerViewportRootClass, playerSafeAreaTopClass, className)}
        style={{ "--player-viewport-max": "480px" } as React.CSSProperties}
      >
        <OfflineBanner />
        {children}
      </div>
    </div>
  );
}