'use client';

import {HStack} from '@astryxdesign/core/Layout';
import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';

/**
 * Three dots, while the first token is still on its way.
 *
 * Shown only BEFORE any text arrives. Once the answer starts streaming, the
 * text itself is the progress indicator, and keeping the dots underneath it
 * would say "still thinking" about something already being read.
 *
 * The stagger is an arbitrary-property utility rather than
 * `style={{animationDelay}}` — the project bans inline style objects, and an
 * animation offset is not a design token, so there is no token-backed utility
 * to reach for. One shared keyframe with three offsets keeps the dots in phase
 * with each other regardless of when the component mounts.
 *
 * Reduced motion is handled globally in globals.css; the dots then rest as
 * three static marks, which is a fine still frame.
 */
const DOT = 'size-1.5 rounded-full bg-secondary animate-bounce';

export function TypingIndicator() {
  return (
    <HStack gap={1} vAlign="center">
      <span aria-hidden="true" className={`${DOT} [animation-delay:-300ms]`} />
      <span aria-hidden="true" className={`${DOT} [animation-delay:-150ms]`} />
      <span aria-hidden="true" className={DOT} />
      <VisuallyHidden>Loyaly AI is thinking</VisuallyHidden>
    </HStack>
  );
}
