import { useCallback } from "react";
import type { ChatMessage, UIButtonData } from "./types";
import { ChatInput } from "./ChatInput";
import { MessageList } from "./MessageList";

interface ChatProps {
  chatId: string;
  messages: ChatMessage[];
  isTyping: boolean;
  userId: string | null;
  onSend: (text: string, files?: { filename: string; size: number; mime_type: string; download_url: string }[]) => void;
  onButtonClick: (chatId: string, button: UIButtonData) => void;
  disabled: boolean;
}

export function Chat({
  chatId,
  messages,
  isTyping,
  userId,
  onSend,
  onButtonClick,
  disabled,
}: ChatProps) {
  const handleButtonClick = useCallback(
    (button: UIButtonData) => {
      onButtonClick(chatId, button);
    },
    [chatId, onButtonClick]
  );

  return (
    <div className="chat" key={chatId}>
      <MessageList
        messages={messages}
        isTyping={isTyping}
        onButtonClick={handleButtonClick}
      />
      <ChatInput onSend={onSend} disabled={disabled || !userId} userId={userId} />
    </div>
  );
}
