ani67/src/components/chatbot/ChatInput.tsx

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Send, StopCircle } from "lucide-react";

interface ChatInputProps {
  inputMessage: string;
  setInputMessage: (message: string) => void;
  onSendMessage: () => void;
  isLimitReached: boolean;
  isLoading: boolean;
  chatType: "medical" | "psychological";
  onEndConversation?: () => void;
  hasMessages?: boolean;
}

export const ChatInput = ({
  inputMessage,
  setInputMessage,
  onSendMessage,
  isLimitReached,
  isLoading,
  chatType,
  onEndConversation,
  hasMessages = false,
}: ChatInputProps) => {
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      onSendMessage();
    }
  };

  const isPsychological = chatType === "psychological";
  const placeholder = isPsychological 
    ? "Comparte lo que tengas en mente..." 
    : "Describe tu consulta médica aquí...";

  return (
    <div className="p-6 border-t border-border">
      <div className="flex flex-col space-y-3">
        <div className="flex space-x-3">
          <Input
            value={inputMessage}
            onChange={(e) => setInputMessage(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder={placeholder}
            disabled={isLimitReached || isLoading}
            className="flex-1 rounded-xl"
          />
          <Button
            onClick={onSendMessage}
            disabled={!inputMessage.trim() || isLimitReached || isLoading}
            size="icon"
            className="rounded-xl"
          >
            <Send className="w-4 h-4" />
          </Button>
        </div>
        
        {/* Botón terminar conversación para chat psicológico */}
        {isPsychological && hasMessages && onEndConversation && (
          <Button
            variant="outline"
            size="sm"
            onClick={onEndConversation}
            disabled={isLoading}
            className="self-end text-purple-600 hover:text-purple-700 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-purple-900/20"
          >
            <StopCircle className="w-4 h-4 mr-2" />
            Terminar conversación
          </Button>
        )}
      </div>
    </div>
  );
};