import React, {FC} from 'react';
import {StyleSheet, ViewProps, ViewStyle} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Animated, {useAnimatedStyle} from 'react-native-reanimated';
import {
  TAGG_LIGHT_BLUE_2,
  TAGG_LIGHT_BLUE_3,
  TAGG_PURPLE,
} from '../../constants';
import {normalize} from '../../utils';

interface GradientProgressBarProps extends ViewProps {
  progress: Animated.SharedValue<number>;
}

const GradientProgressBar: FC<GradientProgressBarProps> = ({
  style,
  progress,
}) => {
  const animatedProgressStyle = useAnimatedStyle<ViewStyle>(() => ({
    width: `${(1 - progress.value) * 100}%`,
  }));
  return (
    <LinearGradient
      style={[styles.bar, style]}
      useAngle={true}
      colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}>
      <Animated.View style={[styles.blank, animatedProgressStyle]} />
    </LinearGradient>
  );
};
const styles = StyleSheet.create({
  container: {
    borderRadius: 6.5,
  },
  bar: {
    height: normalize(10),
    borderRadius: 6.5,
  },
  blank: {
    alignSelf: 'flex-end',
    height: normalize(10),
    width: '80%',
    backgroundColor: TAGG_LIGHT_BLUE_3,
  },
});

export default GradientProgressBar;