import { useEffect, useState } from 'react';
import { useChatStore } from '../store/chatStore';

// FE-PAGE-005: Complete Chat page implementation - Typing Indicators

interface TypingIndicatorProps {
  conversationId: string;
}

export function TypingIndicator({ conversationId }: TypingIndicatorProps) {
  const [typingUsers] = useState<string[]>([]);
  const { wsStatus } = useChatStore();
  // We'll need to extend useChat to handle typing events
  // For now, this is a placeholder implementation

  useEffect(() => {
    if (wsStatus !== 'connected' || !conversationId) return;

    // TODO: Subscribe to typing events from WebSocket
    // This would require backend support for typing indicators
    // For now, we'll show a static indicator when someone is typing

    return () => {
      // Cleanup
    };
  }, [wsStatus, conversationId]);

  if (typingUsers.length === 0) return null;

  return (
    <div className="px-4 py-2 text-sm text-gray-500 italic">
      {typingUsers.length === 1
        ? `${typingUsers[0]} is typing...`
        : `${typingUsers.length} people are typing...`}
    </div>
  );
}

