src/components/ProgressPips.tsx

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

type Props = {
  total: number;
  current: number;
  doneCount: number;
  liveProgress?: number;
};

export function ProgressPips({ total, current, doneCount, liveProgress = 0 }: Props) {
  return (
    <div className="flex gap-1 px-4">

      {Array.from({ length: total }, (_, i) => {

        const idx = i + 1;

        const isDone = idx <= doneCount;

        const isCurrent = idx === current && !isDone;

        return (

          <div

            key={idx}

            className={cn(

              'h-[3px] flex-1 overflow-hidden rounded-full',

              isDone ? 'bg-sage' : 'bg-white/20',

            )}

          >

            {isCurrent ? (

              <div

                className="h-full bg-sage transition-[width] duration-100 ease-linear"

                style={{

                  width: `${Math.max(8, Math.min(100, liveProgress * 100))}%`,

                }}

              />

            ) : null}

          </div>

        );

      })}

    </div>
  );
}