Dwinzo_dev/app/src/components/ui/analysis/ThroughputSummary.tsx

import { ThroughputSummaryIcon } from "../../icons/analysis";

const ProductionCapacity = ({
  progressPercent = 50,
  avgProcessTime = "28.4 Secs/unit",
  machineUtilization = "78%",
  throughputValue = 128,
  timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
}) => {
  const totalBars = 6;
  const barsToFill = Math.floor((progressPercent / 100) * totalBars);
  const partialFillPercent =
    ((progressPercent / 100) * totalBars - barsToFill) * 100;

  return (
    <div className="productionCapacity-container analysis-card">
      <div className="productionCapacity-wrapper analysis-card-wrapper">
        <div className="card-header">
          <div className="header">
            <div className="main-header">Throughput Summary</div>
            <div className="sub-header">
              {timeRange.startTime} - {timeRange.endTime}
            </div>
          </div>
          <div className="icon-wrapper">
            <ThroughputSummaryIcon />
          </div>
        </div>

        <div className="process-container">
          <div className="throughput-value">
            <span className="value">{throughputValue}</span> Units/hour
          </div>

          {/* Dynamic Progress Bar */}
          <div className="progress-bar-wrapper">
            {[...Array(totalBars)].map((_, i) => (
              <div className="progress-bar" key={i}>
                {i < barsToFill ? (
                  <div className="bar-fill full" />
                ) : i === barsToFill ? (
                  <div
                    className="bar-fill partial"
                    style={{ width: `${partialFillPercent}%` }}
                  />
                ) : null}
              </div>
            ))}
          </div>
        </div>

        <div className="metrics-section">
          <div className="metric">
            <span className="label">Avg. Process Time</span>
            <span className="value">{avgProcessTime}</span>
          </div>
          <div className="metric">
            <span className="label">Machine Utilization</span>
            <span className="value">{machineUtilization}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductionCapacity;