import type { ReactNode } from "react";
import { StyleSheet, View } from "react-native";
import { StatusBar } from "expo-status-bar";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { TopChromeBar } from "@/components/TopChromeBar";
import { useAppTheme } from "@/contexts/ThemeContext";

type TabPageProps = {
  children: ReactNode;
};

/** Tab root — floating blurred top chrome; children should be a TabScrollView. */
export function TabPage({ children }: TabPageProps) {
  const insets = useSafeAreaInsets();
  const { isDark } = useAppTheme();

  return (
    <View style={styles.root}>
      <StatusBar style={isDark ? "light" : "dark"} />
      <View
        style={[
          styles.content,
          { paddingLeft: insets.left, paddingRight: insets.right },
        ]}
      >
        {children}
      </View>
      <TopChromeBar />
    </View>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: "transparent",
  },
  content: {
    flex: 1,
    backgroundColor: "transparent",
  },
});