import { useEffect, useRef } from 'react';

export const STEP_NAMES = { 1: 'Choose your appointment', 2: 'Review your appointment', 3: 'Appointment booked' } as const;

// Focus goes to the step body when the step changes: the control that moved it has gone. Not on
// first show, and not when something inside the step (a refusal's alert) has already taken focus.
export const useStepFocus = (step: number) => {
    const ref = useRef<HTMLDivElement>(null);
    const shown = useRef(step);
    useEffect(() => {
        if (shown.current === step) return;
        shown.current = step;
        const body = ref.current;
        if (body && !body.contains(document.activeElement)) body.focus();
    }, [step]);
    return ref;
};