'use client'

import { cn } from '@/lib/utils'
import { Spinner } from '@phosphor-icons/react'

export function TypingIndicator() {
  return (
    <div 
      className={cn(
        "aui-assistant-message-root",
        "fade-in animate-in duration-150",
        "relative mx-auto w-full max-w-[var(--thread-max-width)] py-3"
      )}
      data-role="assistant"
    >
      <div className="aui-assistant-message-content px-2">
        <div className="flex items-center gap-2 py-1 text-muted-foreground">
          <Spinner size={16} className="animate-spin" />
          <span className="text-sm">Thinking...</span>
        </div>
      </div>
    </div>
  )
}
