import { StyleSheet } from "react-native";
import Animated, { useAnimatedRef } from "react-native-reanimated";

import { useColorScheme } from "@/hooks/use-color-scheme";
import { useThemeColor } from "@/hooks/use-theme-color";
import { PropsWithChildren } from "react";
import { View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

type Props = PropsWithChildren<{
  headerBackgroundColor: { dark: string; light: string };
}>;

export default function ScrollView({ children, headerBackgroundColor }: Props) {
  const scrollRef = useAnimatedRef<Animated.ScrollView>();
  const insets = useSafeAreaInsets();
  const colorScheme = useColorScheme() ?? "light";
  const backgroundColor = useThemeColor({}, "background");

  return (
    <View
      ref={scrollRef}
      style={[
        styles.container,
        {
          backgroundColor,
          paddingTop: insets.top,
        },
      ]}
      scrollEventThrottle={16}
    >
      <View style={styles.content}>{children}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ccc",
  },

  content: {},
});