import React from "react";
import { View } from "react-native";
import ProgressBarAnimated from "react-native-progress-bar-animated";
import { windowWidth } from "@src/themes";
import { appColors } from "@src/themes";
import { useValues } from "@src/utils/context";
import { ProgressbarProps } from "../type";

export function ProgressBar({ value }: ProgressbarProps) {
  const { isDark } = useValues();

  return (
    <View
      style={{
        backgroundColor: isDark ? appColors.solidBorder : appColors.lightGray,
      }}
    >
      <ProgressBarAnimated
        width={windowWidth(600)}
        value={value}
        backgroundColorOnComplete={appColors.primary}
        backgroundColor={appColors.primary}
        borderColor={isDark ? appColors.primaryText : appColors.whiteColor}
        height={7}
        borderRadius={0}
        borderTopStartRadius={4}
      />
    </View>
  );
}
