import React from "react";
import { ProductionCapacityIcon } from "../../icons/analysis";

const ProductionCapacity = () => {
  const totalBars = 6;
  const progressPercent = 50;

  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">08:00 - 09:00 AM</div>
          </div>
          <div className="icon-wrapper">
            <ProductionCapacityIcon />
          </div>
        </div>

        <div className="process-container">
          <div className="throughput-value">
            <span className="value">128</span> Units/hour
          </div>

          {/* 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">28.4 Secs/unit</span>
          </div>
          <div className="metric">
            <span className="label">Machine Utilization</span>
            <span className="value">78%</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductionCapacity;