import Message from './Message.js';

export default class ChatBox {
    render() {
        const container = document.createElement('div');
        container.classList.add('d-flex', 'flex-column', 'h-100');

        container.innerHTML = `
            <div id="messages" class="flex-grow-1 p-3 overflow-auto"></div>
            <form id="messageForm" class="d-flex">
                <input type="text" id="messageInput" class="form-control me-2" placeholder="Type your message..." required>
                <button type="submit" class="btn btn-success">Send</button>
            </form>
        `;

        container.querySelector('#messageForm').addEventListener('submit', (e) => {
            e.preventDefault();
            const messageText = container.querySelector('#messageInput').value;
            const message = new Message(messageText, 'sent');
            container.querySelector('#messages').appendChild(message.render());
            container.querySelector('#messageInput').value = '';
        });

        return container;
    }
}