import { clock } from '../lib/labels.js';

export default function EventLog({ events }) {
  return (
    <section className="panel event-log">
      <h2>Verlauf</h2>
      {events.length === 0 ? <p className="muted small">Noch keine Ereignisse.</p> : (
        <ol>
          {events.map((e, i) => (
            <li key={`${e.at}-${i}`} className={`ev-${e.type}`}>
              <time>{clock(e.at)}</time>
              <span>{e.message}</span>
            </li>
          ))}
        </ol>
      )}
    </section>
  );
}