"use client";

import type { TemplateExercise } from "@/db/schema";
import { cn } from "@/lib/utils";

type TemplateProgressBarProps = {
  exercises: TemplateExercise[];
  currentIndex: number; // index of the exercise in progress
  done: boolean; // whole template finished
};

export function TemplateProgressBar({
  exercises,
  currentIndex,
  done,
}: TemplateProgressBarProps) {
  return (
    <div className="w-full max-w-md">
      <div className="flex gap-1.5">
        {exercises.map((ex, i) => (
          <div
            key={`${ex.name}-${i}`}
            className={cn(
              "h-2 flex-1 rounded-full transition-colors",
              done || i < currentIndex
                ? "bg-primary"
                : i === currentIndex
                  ? "bg-primary/50 animate-pulse"
                  : "bg-muted"
            )}
            style={{ flexGrow: ex.duration }}
            title={`${ex.name} (${ex.duration}m)`}
          />
        ))}
      </div>
      <p className="mt-2 text-center text-sm text-muted-foreground">
        Gerakan {Math.min(currentIndex + 1, exercises.length)} dari{" "}
        {exercises.length}
      </p>
    </div>
  );
}