import { Check } from 'lucide-preact';
import { COPY } from './copy.js';
/**
* Los puntos de progreso verticales del borde derecho (skill progressive-survey):
* aparecen al llegar a cada paso, se pueden elegir para volver, y distinguen
* actual / completo / requiere atención. Son la forma principal de volver atrás:
* no hay botones Anterior/Siguiente fijos.
*
* El estado nunca va solo por color: el completo lleva un check, el que pide
* atención un «!», el actual un anillo; y cada punto dice su estado en
* `aria-label` y en el rótulo que aparece al pasar el mouse o enfocarlo.
* Con el teclado, las flechas arriba/abajo recorren los puntos.
*
* @param {{
* steps: import('./steps.js').VisibleStep[],
* activeId: string,
* labelOf: (step: import('./steps.js').VisibleStep) => string,
* onSelect: (id: string) => void,
* }} props
*/
export default function ProgressDots({ steps, activeId, labelOf, onSelect }) {
const revealed = steps.filter((step) => step.revealed);
/** @param {KeyboardEvent} event */
const onKeyDown = (event) => {
if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
const buttons = [
.../** @type {HTMLElement} */ (event.currentTarget).querySelectorAll('button'),
];
const index = buttons.indexOf(/** @type {HTMLButtonElement} */ (document.activeElement));
if (index === -1) return;
event.preventDefault();
const next = event.key === 'ArrowDown' ? index + 1 : index - 1;
buttons[(next + buttons.length) % buttons.length]?.focus();
};
return (
);
}
/**
* @param {{ current: boolean, attention: boolean, complete: boolean }} props
*/
function Dot({ current, attention, complete }) {
if (attention) {
return (
!
);
}
if (current) {
return ;
}
if (complete) {
return (
);
}
return ;
}