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

type PageLayoutProps = PropsWithChildren<{
  backgroundColor?: string;
}>;

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

  const spacingBottom = Math.max(insets.bottom, 16);

  return <View style={[styles.container, { paddingBottom: spacingBottom, backgroundColor }]}>{children}</View>;
}

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

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

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

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