export default function LoadingBar({ loadProgress, isCached }) {
  const percent = loadProgress?.progress != null ? Math.round(loadProgress.progress) : 0;
  const fileName = loadProgress?.file?.split("/").pop() || "";

  return (
    <div className="w-72 flex flex-col items-center gap-2">
      <div className="w-full h-1.5 bg-[var(--color-surface)] rounded-full overflow-hidden">
        <div
          className="h-full bg-[var(--color-blue)] transition-all duration-300 rounded-full"
          style={{ width: `${percent}%` }}
        />
      </div>
      <p className="text-[var(--color-text-secondary)] text-xs">
        {isCached ? "Loading from cache" : "Downloading model"}
        {fileName ? ` — ${fileName} ${percent}%` : "..."}
      </p>
    </div>
  );
}