import React, { useState, useEffect } from "react";
import { View, Appearance } from "react-native";
import tw from "tailwind-rn";

import Colors from "../constants/Colors";

//Color
import Color from "../constants/Colors";

function Progress({ percent, alignItems }) {
  const colorScheme = Appearance.getColorScheme();
  const [delayPercent, setDelayPercent] = useState(0);
  useEffect(() => {
    if (percent) {
      setTimeout(() => {
        setDelayPercent(() => percent);
      }, 1000);
    }
  }, [percent]);
  return (
    <View
      style={[
        tw(
          `w-full h-1.5 rounded-full  overflow-hidden my-3 flex ${alignItems}`
        ),
        { backgroundColor: Colors.theme1[colorScheme].green79 + "22" },
      ]}
    >
      <View
        style={[
          tw("h-full rounded-full"),
          {
            backgroundColor: Color.theme1[colorScheme].greenCF,
            width: percent + "%",
            // backgroundColor: Color.theme1.light.blue4,
          },
        ]}
      ></View>
    </View>
  );
}

export default Progress;