import { cn } from "@/lib/utils";

interface ProgressBarProps {
  completed: number;
  total: number;
  className?: string;
}

export function ProgressBar({ completed, total, className }: ProgressBarProps) {
  const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;

  const fillColor =
    percentage === 0
      ? ""
      : percentage === 100
        ? "bg-status-success-dot"
        : "bg-primary";

  return (
    <div className={cn("flex items-center gap-2", className)}>
      <div className="h-2 flex-1 rounded-full bg-muted">
        {percentage > 0 && (
          <div
            className={cn("h-2 rounded-full transition-all", fillColor)}
            style={{ width: `${percentage}%` }}
          />
        )}
      </div>
      <span className="text-xs font-medium text-muted-foreground">
        {percentage}%
      </span>
    </div>
  );
}
