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

type PageLayoutProps = PropsWithChildren<{
  backgroundColor?: string;
  topInset?: 'auto' | 'none' | number;
  horizontalPadding?: number | false;
}>;

export function PageLayout({
  children,
  backgroundColor = '#050505',
  topInset = 'auto',
  horizontalPadding = 4,
}: PageLayoutProps) {
  const insets = useSafeAreaInsets();

  const spacingTop = topInset === 'auto' ? insets.top : topInset === 'none' ? 0 : topInset;
  const spacingBottom = Math.max(insets.bottom, 16);
  const spacingHorizontal = horizontalPadding === false ? 0 : horizontalPadding;

  return (
    <View
      style={[
        styles.container,
        {
          paddingTop: spacingTop,
          paddingBottom: spacingBottom,
          paddingHorizontal: spacingHorizontal,
          backgroundColor
        }
      ]}
    >
      {children}
    </View>
  );
}

export const StatusBarSpacer = memo(function StatusBarSpacer() {
  const insets = useSafeAreaInsets();

  if (!insets.top) {
    return null;
  }

  return <View style={{ height: insets.top }} />;
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});