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(60);
  // 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;