kandev/apps/web/components/task/session-workflow-progress.tsx

'use client';

import type { WorkflowStep } from '@/lib/types/http';
import { cn } from '@kandev/ui/lib/utils';
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@kandev/ui/tooltip';

type SessionWorkflowProgressProps = {
  steps: WorkflowStep[];
  currentStepId: string | null;
  className?: string;
};

export function SessionWorkflowProgress({
  steps,
  currentStepId,
  className,
}: SessionWorkflowProgressProps) {
  const currentStepIndex = currentStepId
    ? steps.findIndex((step) => step.id === currentStepId)
    : -1;

  return (
    <div className={cn('flex items-center gap-1', className)}>
      {steps.map((step, i) => (
        <Tooltip key={step.id}>
          <TooltipTrigger asChild>
            <div
              className={cn(
                'w-2 h-2 rounded-full',
                i < currentStepIndex && 'bg-green-500',
                i === currentStepIndex && 'bg-blue-500 ring-2 ring-blue-200',
                i > currentStepIndex && 'bg-gray-300'
              )}
            />
          </TooltipTrigger>
          <TooltipContent>{step.name}</TooltipContent>
        </Tooltip>
      ))}
    </div>
  );
}