import React from "react";
import LinearProgress from "@mui/material/LinearProgress";
import "./ProgressBar.styles.scss";

export function ProgressBar(props) {
  const {
    value = 10,
    showTime = true,
    time = 30,
    customLabel,
    status = "remaining", // "completed", "failed", or "remaining"
  } = props;

  const getLabel = () => {
    if (customLabel) return customLabel;
    if (status === "completed") return "Completed";
    if (status === "failed") return "Failed";
    return `${Math.round(value)}%${
      showTime ? ` • ${time} seconds remaining` : ""
    }`;
  };

  return (
    <div className="progressbar_layout">
      <div className={`progress_container progress_container_${status}`}>
        <div className="progressbar_label_container">
          <div className="label_name">{getLabel()}</div>
        </div>
        <div className="progressbar_status">
          <LinearProgress
            variant="determinate"
            value={value}
            className={`progress_bar progress_bar_${status}`}
            {...props}
          />
        </div>
      </div>
    </div>
  );
}
