import type { ReactNode } from "react";
import { Platform, ScrollView, type ScrollViewProps, StyleSheet, View } from "react-native";

import { tabLayout } from "@/lib/tab-layout";
import { useTabBarScrollPadding } from "@/lib/tab-bar-insets";

type TabScrollViewProps = ScrollViewProps & {
  /** Rendered above screen body — scrolls under the blurred top chrome. */
  header?: ReactNode;
  children: ReactNode;
};

/** Scroll view for native tab screens — content scrolls under the tab bar. */
export function TabScrollView({
  header,
  children,
  contentContainerStyle,
  style,
  ...props
}: TabScrollViewProps) {
  const scrollPadding = useTabBarScrollPadding();

  return (
    <ScrollView
      style={[styles.scroll, style]}
      contentContainerStyle={[
        tabLayout.scrollContent,
        { paddingBottom: scrollPadding },
        contentContainerStyle,
      ]}
      contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "never" : undefined}
      scrollIndicatorInsets={{ bottom: scrollPadding }}
      {...props}
    >
      {header}
      <View style={tabLayout.scrollBody}>{children}</View>
    </ScrollView>
  );
}

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