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,
  status = "default",
}) => {
  const numericProgress = Number(progress);
  const normalizedProgress = Math.max(
    0,
    Math.min(100, Number.isFinite(numericProgress) ? numericProgress : 0),
  );
  const isError = status === "error";
  const containerBackground = isError ? "#3C101B" : "#0F0C19";
  const fillColor = isError ? "#FF6B6B" : Palette.white;
  const shouldUseGradient = gradient && !isError;

  return (
    <View
      style={{
        width: "100%",
        height: 5,
        backgroundColor: containerBackground,
        borderRadius: mainBorderRadius,
        overflow: "hidden",
        ...containerStyle,
      }}
    >
      {shouldUseGradient ? (
        <LinearGradient
          colors={["#F94697", "#7023F7"]}
          style={{
            width: `${normalizedProgress}%`,
            height: "100%",
            borderRadius: mainBorderRadius,
          }}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
        />
      ) : (
        <View
          style={{
            width: `${normalizedProgress}%`,
            height: "100%",
            backgroundColor: fillColor,
            borderRadius: mainBorderRadius,
          }}
        />
      )}
    </View>
  );
};

export default ProgressBar;