import { useEffect, useRef } from 'react';

// Why a booking was sent back to be chosen again. Announced, and focused when it appears: the control
// that was pressed has gone, and a keyboard user must not be left on the page with no reason.
export const StepRefusal = ({ message }: { message: string | undefined }) => {
    const ref = useRef<HTMLParagraphElement>(null);
    useEffect(() => {
        if (message) ref.current?.focus();
    }, [message]);
    if (!message) return null;
    return (
        <p ref={ref} tabIndex={-1} role="alert" className="text-sm text-destructive" data-testid="self-booking-step-refusal">
            {message}
        </p>
    );
};