import { useEffect, useRef } from 'preact/hooks';
import Message from './Message';

export default function MessageList({ messages }) {
    const endRef = useRef(null);

    useEffect(() => {
        endRef.current?.scrollIntoView({ behavior: 'smooth' });
    }, [messages]);

    return (
        <div class="chat-messages">
            <div class="messages-spacer" />
            {messages.map(msg => <Message key={msg.id} message={msg} />)}
            <div ref={endRef} />
        </div>
    );
}