import type { PipelineStats } from "../types";

interface Props {
  stats: PipelineStats;
}

export function StatsPanel({ stats }: Props) {
  return (
    <div className="stats-panel">
      <div className="panel-header">
        <h2>Stats</h2>
      </div>
      <div className="stats-grid">
        <div className="stat">
          <div className="stat-value">{stats.total_chunks}</div>
          <div className="stat-label">Total Chunks</div>
        </div>
        <div className="stat">
          <div className="stat-value">{stats.processed}</div>
          <div className="stat-label">Processed</div>
        </div>
        <div className="stat">
          <div className="stat-value">{stats.failed}</div>
          <div className="stat-label">Failed</div>
        </div>
        <div className="stat">
          <div className="stat-value">{stats.retries}</div>
          <div className="stat-label">Retries</div>
        </div>
        <div className="stat">
          <div className="stat-value">
            {stats.throughput_mbps.toFixed(2)}
          </div>
          <div className="stat-label">MB/s</div>
        </div>
        <div className="stat">
          <div className="stat-value">{stats.elapsed.toFixed(2)}s</div>
          <div className="stat-label">Elapsed</div>
        </div>
      </div>
    </div>
  );
}