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

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

type TabPageProps = {
  children: ReactNode;
};

/** Tab root — pinned top chrome, scrollable body below. */
export function TabPage({ children }: TabPageProps) {
  const { isDark } = useAppTheme();

  return (
    <View style={styles.root}>
      <StatusBar style={isDark ? "light" : "dark"} />
      <TopChromeBar />
      <View style={styles.content}>{children}</View>
    </View>
  );
}

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