import type { PropsWithChildren } from 'react';
import { View } from 'react-native';
import {
  SafeAreaProvider, useSafeAreaInsets,
} from 'react-native-safe-area-context';

function InsetContent({ children }: PropsWithChildren) {
  const insets = useSafeAreaInsets();
  return (
    <View style={{
      flex: 1,
      paddingTop: insets.top + 16,
      paddingBottom: insets.bottom + 16,
      paddingLeft: insets.left + 16,
      paddingRight: insets.right + 16,
    }}>
      {children}
    </View>
  );
}

// Standalone root, without a navigator header or tab bar.
export function InsetScreen({ children }: PropsWithChildren) {
  return (
    <SafeAreaProvider>
      <InsetContent>{children}</InsetContent>
    </SafeAreaProvider>
  );
}