import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";

interface EcommerceProgressBarProps {
  status: "idle" | "generating" | "done" | "failed" | string;
  label?: string;
}

function mapStatus(status: string): "running" | "completed" | "failed" {
  if (status === "done") return "completed";
  if (status === "failed") return "failed";
  if (status === "generating" || status === "modeling") return "running";
  return "running";
}

export function EcommerceProgressBar({ status, label }: EcommerceProgressBarProps) {
  const progress = mapStatus(status) === "running" ? 50 : 100;
  const smoothed = useSmoothedProgress(progress, mapStatus(status));

  if (status === "idle") return null;

  return (
    <div className="ecommerce-progress-bar">
      <span className="ecommerce-progress-bar__label">{label || "AI 正在生成"}</span>
      <div className="ecommerce-progress-bar__track">
        <div className="ecommerce-progress-bar__fill" style={{ width: `${smoothed}%` }} />
      </div>
      <span className="ecommerce-progress-bar__value">{smoothed}%</span>
    </div>
  );
}