import { useSafeAreaInsets } from "react-native-safe-area-context";
import { View, type ViewProps } from "tamagui";
// 引入屏幕适配
import { wp, sp } from '@/utils/ui/screenUtils';

/**
 * 自定义安全区组件
 * 适配了通用安全区-底部、左侧、右侧
 * 顶部因为使用Expo的Native Stack导航，已自动适配安全区，不需要额外处理
 * 不使用Expo的Native Stack导航的页面，请参照此处实现自行处理
 */
export const CustomSafeArea = (props: ViewProps) => {
  const insets = useSafeAreaInsets();
  return (
    <View
      {...props}
      style={[
        {
          paddingBottom: insets.bottom > 0 ? insets.bottom : wp(16),
          paddingLeft: insets.left,
          paddingRight: insets.right,
          flex: 1,
        },
        props.style,
      ]}
    >
      {props.children}
    </View>
  );
};
