'use client';

import { memo } from 'react';
import { cn } from '@djangocfg/ui-core/lib';

export interface StreamingIndicatorProps {
  variant?: 'dots' | 'pulse';
  label?: string;
  className?: string;
}

/**
 * StreamingIndicator — animated dots or pulse for streaming state.
 *
 * Memoised: re-renders only when `variant`, `label` or `className`
 * change. All props are primitives, so default shallow comparison is
 * sufficient.
 */
function StreamingIndicatorRaw({ variant = 'dots', label, className }: StreamingIndicatorProps) {
  return (
    <span
      className={cn('inline-flex items-center gap-1.5 text-xs text-muted-foreground', className)}
      aria-live="off"
    >
      {variant === 'dots' ? (
        <span className="inline-flex gap-0.5" aria-hidden>
          <span className="size-1 animate-bounce rounded-full bg-current [animation-delay:-0.2s]" />
          <span className="size-1 animate-bounce rounded-full bg-current [animation-delay:-0.1s]" />
          <span className="size-1 animate-bounce rounded-full bg-current" />
        </span>
      ) : (
        <span className="inline-block size-1.5 animate-pulse rounded-full bg-current" aria-hidden />
      )}
      {label ? <span className="italic">{label}</span> : null}
    </span>
  );
}

export const StreamingIndicator = memo(StreamingIndicatorRaw);