import React from "react";

const ProgressBar = ({
  plannedWork = 100,
  completedWork = 0,
  height = "8px",
  className = "mb-4",
  rounded = true,
}) => {
  const getProgress = (planned, completed) => {
    if (!planned || planned === 0) return "0%";
    return `${Math.min((completed / planned) * 100, 100).toFixed(2)}%`;
  };

  const progressStyle = {
    width: getProgress(plannedWork, completedWork),
  };

  return (
    <div
      className={`progress ${className} ${rounded ? "rounded" : ""}`}
      style={{ height }}
    >
      <div
        className={`progress-bar ${rounded ? "rounded" : ""}`}
        role="progressbar"
        style={progressStyle}
        aria-valuenow={completedWork}
        aria-valuemin="0"
        aria-valuemax={plannedWork}
      ></div>
    </div>
  );
};

export default ProgressBar;