import { useEffect, useState } from "react";
import { View } from "react-native";
import { mainBorderRadius } from "../styles/Style";
import { Palette } from "../styles";
import { LinearGradient } from "./LinearGradient/LinearGradient";

const ProgressBar = ({
  progress = 0,
  containerStyle = {},
  gradient = false,
}) => {
  return (
    <View
      style={{
        width: "100%",
        height: 5,
        backgroundColor: "#0F0C19",
        borderRadius: mainBorderRadius,
        overflow: "hidden",
        ...containerStyle,
      }}
    >
      {gradient ? (
        <LinearGradient
          colors={["#F94697", "#7023F7"]}
          style={{
            width: `${progress}%`,
            height: "100%",
            borderRadius: mainBorderRadius,
          }}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
        />
      ) : (
        <View
          style={{
            width: `${progress}%`,
            height: "100%",
            backgroundColor: Palette.white,
            borderRadius: mainBorderRadius,
          }}
        />
      )}
    </View>
  );
};

export default ProgressBar;