Progress Dots

"use client";

import { IconCheck, IconPlayerPauseFilled, IconPlayerPlayFilled, IconRotateClockwise } from "@tabler/icons-react";
import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, type MotionValue } from "motion/react";
import { useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent } from "react";
import useMeasure from "react-use-measure";
import { cn } from "@/lib/utils";

const SPRING = { type: "spring", duration: 0.45, bounce: 0 } as const;
const PILL_HEIGHT = 26;
const LABEL_PAD = 10;
// Room a done step's check takes in front of its label.
const CHECK = 16;
const CONTROL = 26;
// The pause button's size beside resting dots.
const CONTROL_REST = 18;
// Vertical padding around a segment's bar, which is also its touch target.
const SEGMENT_PAD = 12;

export type ProgressStep = string | { label: string; /** Seconds this step plays for, instead of `duration`. */ duration?: number };

export type ProgressDotsProps = {
  /** One entry per step: a label, or a label with its own duration. */
  steps: ProgressStep[];