'use client';
/**
 * ImageProgressHeader — 生图进度标题 + 进度条
 * 用于屏4"挑图"顶部，能离开提示
 */
interface ImageProgressHeaderProps {
  imageTotal: number;
  imageDone: number;
  pendingCount: number;
}

export function ImageProgressHeader({ imageTotal, imageDone, pendingCount }: ImageProgressHeaderProps) {
  const pct = imageTotal > 0 ? Math.round((imageDone / imageTotal) * 100) : 0;
  return (
    <>
      <div className="flex items-center justify-between mb-4">
        <div>
          <h2 className="text-xl font-bold text-text-primary">挑图</h2>
          <p className="text-sm text-text-secondary mt-0.5">
            正在生成 {imageTotal} 批图… {imageDone}/{imageTotal}
            {pendingCount > 0 && ' · 可先去忙别的，好了会更新'}
          </p>
        </div>
        {imageTotal > 0 && (
          <span className="text-lg font-bold text-brand-orange">{imageDone}/{imageTotal}</span>
        )}
      </div>
      {imageTotal > 0 && (
        <div className="mb-4 h-2 bg-surface-tertiary rounded-full overflow-hidden"
          role="progressbar" aria-label={`图片生成进度 ${imageDone}/${imageTotal}`}
          aria-valuenow={imageDone} aria-valuemin={0} aria-valuemax={imageTotal}>
          <div className="h-full bg-brand-orange rounded-full transition-all"
            style={{ width: `${pct}%` }} />
        </div>
      )}
    </>
  );
}
