import { MessageItem } from './MessageItem';
import type { Message } from '@/atoms/chatAtoms';

interface MessageContainerProps {
  messages: Message[];
}

export function MessageContainer(props: MessageContainerProps) {
  const { messages } = props;

  return (
    <div className="flex-1 overflow-y-auto">
      {messages.length === 0 ? (
        <div className="flex items-center justify-center h-full text-gray-500">
          <p>No messages yet. Start the conversation!</p>
        </div>
      ) : (
        <div>
          {messages?.map((msg) => (
            <MessageItem key={msg.id} message={msg} />
          ))}
        </div>
      )}
    </div>
  );
}