import React from 'react';
import {SCREEN_HEIGHT} from '../../utils';
import {View, StyleSheet, ViewProps} from 'react-native';
import Animated, {
  Value,
  interpolateColors,
  interpolate,
} from 'react-native-reanimated';

interface SearchHeaderProps extends ViewProps {
  top: Value<number>;
}
const SearchHeader: React.FC<SearchHeaderProps> = ({top, style}) => {
  const color: Animated.Node<number> = interpolateColors(top, {
    inputRange: [-SCREEN_HEIGHT, 0],
    outputColorRange: ['#fff', '#000'],
  });
  const searchOpacity: Animated.Node<number> = interpolate(top, {
    inputRange: [-SCREEN_HEIGHT, 0],
    outputRange: [0, 1],
  });
  const exploreOpacity: Animated.Node<number> = interpolate(top, {
    inputRange: [-SCREEN_HEIGHT, 0],
    outputRange: [1, 0],
  });
  return (
    <View style={[styles.container, style]}>
      <View style={styles.headerContainer}>
        <Animated.Text
          style={[styles.header, {opacity: exploreOpacity, color}]}>
          Explore
        </Animated.Text>
      </View>
      <View style={styles.headerContainer}>
        <Animated.Text style={[styles.header, {opacity: searchOpacity, color}]}>
          Search
        </Animated.Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    height: 30,
  },
  headerContainer: {
    position: 'absolute',
    left: '50%',
  },
  header: {
    position: 'relative',
    right: '50%%',
    fontSize: 24,
    fontWeight: 'bold',
  },
});
export default SearchHeader;