import React from 'react';
import {StyleSheet} from 'react-native';
import Animated, {interpolate} from 'react-native-reanimated';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';

interface SearchResultsBackgroundProps {
  top: Animated.Value<number>;
}
const SearchResultsBackground: React.FC<SearchResultsBackgroundProps> = ({
  top,
  children,
}) => {
  const opacityBackground: Animated.Node<number> = interpolate(top, {
    inputRange: [-SCREEN_HEIGHT, 0],
    outputRange: [0, 1],
  });
  const opacityContent: Animated.Node<number> = interpolate(top, {
    inputRange: [-SCREEN_HEIGHT / 40, 0],
    outputRange: [0, 1],
  });
  return (
    <Animated.View
      style={[styles.container, {opacity: opacityBackground, top}]}>
      <Animated.View
        style={[styles.contentContainer, {opacity: opacityContent}]}>
        {children}
      </Animated.View>
    </Animated.View>
  );
};
const styles = StyleSheet.create({
  container: {
    height: SCREEN_HEIGHT,
    width: SCREEN_WIDTH,
    position: 'absolute',
    backgroundColor: 'white',
  },
  contentContainer: {
    flex: 1,
    paddingVertical: 10,
    paddingBottom: SCREEN_HEIGHT / 15,
  },
});
export default SearchResultsBackground;