export function MessageList({ messages }) {
    if (!Array.isArray(messages)) return null;

    return (
        <div className="columns" style={{marginTop:"1em"}}>
            <div className="column is-4 is-offset-4">
                <div className="messages">
                {
                    messages.map((m, i) => {
                    return (
                        <div key={`message-${i}`} className={`message is-${m.type}`}>
                            <div className="message-body">
                                {m.text}
                            </div>
                        </div>
                    )
                    })
                }
                </div>
            </div>
        </div>
    );
}