"use client"

import { Card } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

interface TypingIndicatorProps {
  userName?: string
  userAvatar?: string
  showAvatar?: boolean
}

export function TypingIndicator({ userName, userAvatar, showAvatar = false }: TypingIndicatorProps) {
  return (
    <div className="flex justify-start items-end space-x-2">
      {showAvatar && (
        <Avatar className="h-6 w-6">
          <AvatarImage src={userAvatar || "/placeholder.svg"} alt={userName} />
          <AvatarFallback className="text-xs">{userName?.[0] || "U"}</AvatarFallback>
        </Avatar>
      )}

      <div className="max-w-[70%]">
        {userName && <p className="text-xs text-muted-foreground mb-1 px-1">{userName} is typing...</p>}

        <Card className="p-3 bg-muted">
          <div className="flex space-x-1">
            <div className="h-2 w-2 bg-muted-foreground rounded-full animate-bounce" />
            <div
              className="h-2 w-2 bg-muted-foreground rounded-full animate-bounce"
              style={{ animationDelay: "0.1s" }}
            />
            <div
              className="h-2 w-2 bg-muted-foreground rounded-full animate-bounce"
              style={{ animationDelay: "0.2s" }}
            />
          </div>
        </Card>
      </div>
    </div>
  )
}