/**
 * MobileLayout 移动端布局组件
 * 设计稿参考: UIDesignSpec.md 3.1
 * 尺寸: 402x874
 */
import React from 'react';
import { StatusBar } from '../navigation/StatusBar';
import { BottomNav, NavItem } from '../navigation/BottomNav';

export interface MobileLayoutProps {
  children: React.ReactNode;
  navItems?: NavItem[];
  activeNavId?: string;
  onNavItemClick?: (id: string) => void;
  showStatusBar?: boolean;
  showBottomNav?: boolean;
  className?: string;
  contentClassName?: string;
}

export const MobileLayout: React.FC<MobileLayoutProps> = ({
  children,
  navItems = [],
  activeNavId = '',
  onNavItemClick,
  showStatusBar = true,
  showBottomNav = true,
  className = '',
  contentClassName = '',
}) => {
  return (
    <div
      className={`
        min-h-screen bg-bg-page
        flex flex-col
        ${className}
      `}
    >
      {/* Status Bar */}
      {showStatusBar && <StatusBar />}

      {/* Content Area */}
      <main
        className={`
          flex-1 overflow-y-auto
          px-6 py-4
          ${showBottomNav ? 'pb-[99px]' : ''}
          ${contentClassName}
        `}
      >
        {children}
      </main>

      {/* Bottom Navigation */}
      {showBottomNav && navItems.length > 0 && (
        <BottomNav
          items={navItems}
          activeId={activeNavId}
          onItemClick={onNavItemClick}
        />
      )}
    </div>
  );
};

export default MobileLayout;