import React from "react";
import { StyleProp, StyleSheet, ViewStyle } from "react-native";
import { Edge, SafeAreaView } from "react-native-safe-area-context";

type ScreenLayoutProps = {
  children: React.ReactNode;
  padded?: boolean;
  centered?: boolean;
  edges?: Edge[];
  style?: StyleProp<ViewStyle>;
};

export default function ScreenLayout({
  children,
  padded = true,
  centered = false,
  edges = ["top", "left", "right"],
  style,
}: ScreenLayoutProps) {
  return (
    <SafeAreaView
      edges={edges}
      style={[
        styles.container,
        padded && styles.padded,
        centered && styles.centered,
        style,
      ]}
    >
      {children}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  padded: {
    padding: 20,
  },
  centered: {
    alignItems: "center",
    justifyContent: "center",
  },
});
