import React from "react";
import {
  View,
  ViewProps,
  SafeAreaView,
  Platform,
  StatusBar,
  useColorScheme,
} from "react-native";
import { cn } from "@/lib/utils";

interface ScreenWrapperProps extends ViewProps {
  children: React.ReactNode;
  withSafeArea?: boolean;
  fixedHeader?: boolean;
}

export function ScreenWrapper({
  children,
  className,
  containerClassName,
  withSafeArea = true,
  fixedHeader = false,
  ...props
}: ScreenWrapperProps & { containerClassName?: string }) {
  const Container = withSafeArea ? SafeAreaView : View;

  const colorScheme = useColorScheme();
  const isDark = colorScheme === "dark";

  return (
    <View
      className={cn("flex-1 bg-background pt-8", containerClassName)}
      {...props}
    >
      <StatusBar barStyle={isDark ? "light-content" : "dark-content"} />
      <Container className={cn("flex-1", className)}>{children}</Container>
    </View>
  );
}
