import type { ReactNode } from "react";

import { playerViewportColumnClass } from "@/lib/player-viewport";
import { cn } from "@/lib/utils";

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

/**
 * 玩家端根容器：真机全宽；桌面浏览器居中为固定宽度的 H5 画布，避免 PC 打开时 UI 横向拉满。
 */
export function PlayerMobileViewport({
  children,
  className,
}: PlayerMobileViewportProps): ReactNode {
  return (
    <div className="min-h-dvh bg-[#e8ecf3]">
      <div
        className={cn(
          playerViewportColumnClass,
          "relative min-h-dvh bg-white shadow-none sm:shadow-[0_0_48px_rgba(15,23,42,0.1)]",
          className,
        )}
      >
        {children}
      </div>
    </div>
  );
}
