import React from 'react';
import type { ChatMessage, MessageActionCallbacks, ParaSource } from '../../types';
import { MessageBubble } from '../MessageBubble';
import styles from './index.module.less';

interface MessageListProps {
  messages: ChatMessage[];
  actions?: MessageActionCallbacks;
  onSuggestionClick?: (text: string) => void;
  onParaSourceClick?: (source: ParaSource) => void;
  eventContent?: Record<string, React.ReactNode>;
}

export const MessageList: React.FC<MessageListProps> = ({
  messages,
  actions,
  onSuggestionClick,
  onParaSourceClick,
  eventContent,
}) => {
  return (
    <div className={styles.list}>
      {messages.map(msg => (
        <MessageBubble
          key={msg.id}
          message={msg}
          actions={actions}
          onSuggestionClick={onSuggestionClick}
          onParaSourceClick={onParaSourceClick}
          eventContent={eventContent}
        />
      ))}
    </div>
  );
};