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

import {
  ProductionCapacityIcon,
  ThroughputSummaryIcon,
} from "../../icons/analysis";
import SkeletonUI from "../../templates/SkeletonUI";

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;

  const isLoading = true;
  return (
    <div className="throughtputSummary-container analysis-card">
      <div className="throughtputSummary-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>
        {isLoading ? (
          <>
            <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>
          </>
        ) : (
          <SkeletonUI type={"default"} />
        )}
      </div>
    </div>
  );
};

export default ProductionCapacity;