/**
 * 500px 移动端 Shell（Server Component）
 *
 * 原始 Dart: 每个屏幕的 `Scaffold → SafeArea → Center → ConstrainedBox(maxWidth: 500)` 模式
 * （`Breakpoints.mobileMaxWidth = 500.0`）。
 *
 * 集中封装，调用方仅需 `<MobileShell>{...}</MobileShell>` 即可获得统一的移动端宽度约束。
 *
 * 本组件无 hooks，可作为 Server Component 直接 SSR。
 */
import type { ReactNode } from "react";

import styles from "./mobile-shell.module.css";

export interface MobileShellProps {
  children: ReactNode;
  /** 自定义背景色（默认透明，继承 body 背景）。 */
  background?: string;
  /** 自定义 className（注入到内容容器上）。 */
  className?: string;
}

export function MobileShell({
  children,
  background,
  className,
}: MobileShellProps) {
  return (
    <div className={styles.shell}>
      <div
        className={[styles.content, className].filter(Boolean).join(" ")}
        style={background ? { background } : undefined}
      >
        {children}
      </div>
    </div>
  );
}