/**
 * 响应式容器组件
 * 在宽屏时居中显示并限制最大宽度，在移动端占满宽度
 */

import React from 'react';
import { View, StyleProp, ViewStyle } from 'react-native';
import { useResponsive } from '../../hooks/useResponsive';

export interface ResponsiveContainerProps {
  children: React.ReactNode;
  maxWidth?: number;  // 默认 1200
  style?: StyleProp<ViewStyle>;
}

/**
 * 响应式容器组件
 * 
 * 根据屏幕尺寸自动调整布局：
 * - 移动端：占满宽度
 * - 平板及以上：居中显示，限制最大宽度
 * 
 * @param props - 组件属性
 * @param props.children - 子元素
 * @param props.maxWidth - 最大宽度，默认 1200
 * @param props.style - 自定义样式
 * 
 * @example
 * <ResponsiveContainer>
 *   <YourContent />
 * </ResponsiveContainer>
 */
export function ResponsiveContainer({
  children,
  maxWidth = 1200,
  style,
}: ResponsiveContainerProps) {
  const { isWideScreen, width } = useResponsive();

  // 在宽屏时限制最大宽度
  const containerWidth = isWideScreen ? Math.min(width, maxWidth) : width;

  // 计算水平 padding
  const horizontalPadding = isWideScreen ? (width - containerWidth) / 2 : 0;

  return (
    <View
      style={[
        {
          width: '100%',
          maxWidth: isWideScreen ? maxWidth : undefined,
          paddingHorizontal: isWideScreen ? Math.max(horizontalPadding, 16) : 16,
        },
        style,
      ]}
    >
      {children}
    </View>
  );
}

export default ResponsiveContainer;
