import React from "react";
import { Platform, View } from "react-native";
import { SafeAreaView, Edge } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import { useColorScheme } from "react-native";
import type { StatusBarStyle } from "expo-status-bar";

interface ScreenWrapperProps {
  children: React.ReactNode;
  /** Safe area edges to apply (e.g. ["top", "bottom"]) */
  edges?: Edge[];
  /** Optional background color for the screen */
  backgroundColor?: string;
  /** Optional tailwind / nativewind className for inner content */
  className?: string;
  /** Override status bar style; defaults based on device color scheme */
  statusBarStyle?: StatusBarStyle;
}

export function ScreenWrapper({
  children,
  edges = ["top", "bottom"],
  backgroundColor = "#ffffff",
  className,
  statusBarStyle,
}: ScreenWrapperProps) {
  const scheme = useColorScheme();

  const resolvedStatusBarStyle: StatusBarStyle =
    statusBarStyle ?? (scheme === "dark" ? "light" : "dark");

  return (
    <SafeAreaView edges={edges} style={{ flex: 1, backgroundColor }}>
      <StatusBar style={resolvedStatusBarStyle} />
      <View style={{ flex: 1 }}>{children}</View>
    </SafeAreaView>
  );
}

export default ScreenWrapper;