import React from 'react';
import { StyleSheet } from 'react-native';
import Animated, {
  interpolate,
  useAnimatedStyle,
  SharedValue,
} from 'react-native-reanimated';
import { Gradient } from '../Components/Gradient';

type BackShadowProps = {
  degrees: SharedValue<number>;
  right: boolean;
};

const colors = ['rgba(0,0,0,0.0)', 'rgba(0,0,0,0.2)', 'rgba(0,0,0,0.7)'];

const rightPosition = {
  start: { x: 0.5, y: 0 },
  end: { x: 1, y: 0 },
};

const leftPosition = {
  start: { x: 0.5, y: 0 },
  end: { x: 0, y: 0 },
};

const BackShadow: React.FC<BackShadowProps> = ({ degrees, right }) => {
  const position = right ? rightPosition : leftPosition;

  // Using useAnimatedStyle correctly with degrees.value
  const animatedStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      Math.abs(degrees.value), 
      [0, 130, 180],
      [1, 0.5, 0]
    );

    return {
      opacity,
    };
  });

  return (
    <Animated.View
      style={[
        {
          ...StyleSheet.absoluteFillObject,
          zIndex: 4,
        },
        animatedStyle,
      ]}
    >
      <Gradient
        {...position}
        colors={colors}
        style={{
          ...StyleSheet.absoluteFillObject,
        }}
      />
    </Animated.View>
  );
};

export default BackShadow;