import React, { useState, useEffect } from "react";

function Progress({ percent, deskTop, direction = "float-left" }) {
  const [delayPercent, setDelayPercent] = useState(0);
  useEffect(() => {
    setTimeout(() => {
      setDelayPercent(() => percent);
    }, 1000);
  }, [percent]);
  return (
    <div
      className={`flex-1 ${
        deskTop ? "h-3" : "h-1.5"
      } rounded-full overflow-hidden my-3 bg-blueC0 bg-opacity-10`}
    >
      <div
        className={`h-full bg-blueC0 transition-all ${direction} duration-500 rounded-full`}
        style={{ width: delayPercent + "%" }}
      ></div>
    </div>
  );
}

export default Progress;