"use client";

export function TypingIndicator() {
  return (
    <div className="flex items-center gap-2 px-4 py-1 animate-message-in">
      <div
        className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold shrink-0"
        style={{ backgroundColor: "#ff6d5a", color: "#ffffff" }}
      >
        AI
      </div>
      <div className="flex items-center gap-1 px-3 py-2 rounded-lg" style={{ backgroundColor: "#1a1d23" }}>
        <div
          className="w-2 h-2 rounded-full typing-dot"
          style={{ backgroundColor: "#96989d" }}
        />
        <div
          className="w-2 h-2 rounded-full typing-dot"
          style={{ backgroundColor: "#96989d" }}
        />
        <div
          className="w-2 h-2 rounded-full typing-dot"
          style={{ backgroundColor: "#96989d" }}
        />
      </div>
      <span className="text-xs" style={{ color: "#72767d" }}>
        LocalBosses AI is thinking...
      </span>
    </div>
  );
}
