import React from "react";

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

  const percentage = getProgress(plannedWork, completedWork);

  const progressBarStyle = {
    width: ` ${percentage.toFixed(2)}%`,
    transition: "width 0.4s ease",
  };

  const containerStyle = {
    height,
    display: "flex",
    alignItems: "center",
    gap: "8px",
  };

  return (
    <div
      className={`d-flex align-items-center ${className}`}
      style={containerStyle}
    >
      <div className="flex-grow-1">
        <div
          className={`progress ${rounded ? "rounded" : ""}`}
          style={{ height, backgroundColor: "#f0f0f0" }}
        >
          <div
            className={`progress-bar ${rounded ? "rounded" : ""}`}
            role="progressbar"
            style={progressBarStyle}
            aria-valuenow={completedWork}
            aria-valuemin="0"
            aria-valuemax={plannedWork}
          />
        </div>
      </div>

      {showLabel && (
        <span
          className="fw-semibold text-secondary"
          style={{
            minWidth: "45px",
            textAlign: "right",
            fontSize: "0.8rem",
          }}
        >
          {percentage.toFixed(2)}%
        </span>
      )}
    </div>
  );
};

export default ProgressBar;