import {
  IMPORT_STAGE_LABELS_AR,
  type ImportProgressStage,
} from "@/lib/import-stages";
import type { ImportProgressState } from "@/types/import";

export function ImportProgressBar({ progress }: { progress: ImportProgressState }) {
  const stage = progress.stage as ImportProgressStage;
  const label =
    progress.message ||
    IMPORT_STAGE_LABELS_AR[stage] ||
    progress.stage;

  return (
    <div className="space-y-2 rounded-lg border border-blue-100 bg-blue-50 p-4">
      <div className="flex items-center justify-between text-sm">
        <span className="font-medium text-blue-900">{label}</span>
        <span className="text-blue-700">{Math.round(progress.percent)}%</span>
      </div>
      <div className="h-2 overflow-hidden rounded-full bg-blue-100">
        <div
          className="h-full rounded-full bg-[var(--accent)] transition-all duration-300"
          style={{ width: `${Math.min(100, Math.max(0, progress.percent))}%` }}
        />
      </div>
      {progress.totalRows > 0 ? (
        <p className="text-xs text-blue-800">
          {progress.processedRows} / {progress.totalRows} صف
        </p>
      ) : null}
    </div>
  );
}