import React from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';

interface Props {
  children: React.ReactNode;
  headerImage: React.ReactElement;
  headerBackgroundColor: { dark: string; light: string };
}

export default function ParallaxScrollView({
  children,
  headerImage,
  headerBackgroundColor,
}: Props) {
  return (
    <View style={styles.container}>
      <ScrollView scrollEventThrottle={16}>
        <View style={[styles.header, { backgroundColor: headerBackgroundColor.light }]}>
          {headerImage}
        </View>
        <View style={styles.content}>{children}</View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    height: 250,
    overflow: 'hidden',
  },
  content: {
    flex: 1,
    padding: 32,
    gap: 16,
    overflow: 'hidden',
  },
});