'use client';

import { Separator } from '@/components/ui/Separator';
import { ChatMessage } from '@/components/chat/ChatMessage';
import { MessageBase } from '../../lib/types';

export interface ChatList {
  messages: MessageBase[];
}

export function ChatList({ messages }: ChatList) {
  return (
    <div className="relative mx-auto max-w-3xl px-8 pr-12">
      {messages
        // .filter(message => message.role !== 'system')
        .map((message, index) => (
          <div key={index}>
            <ChatMessage message={message} />
            {index < messages.length - 1 && (
              <Separator className="my-4 md:my-8" />
            )}
          </div>
        ))}
    </div>
  );
}