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

interface GradientProgressBarProps extends ViewProps {
  progress: number;
}

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

export default GradientProgressBar;