<script>
  /*
   * The interface exposed by this component is designed to be compatible with the interface
   * exposed by the `EventCapture` class, so that you can do this:
   *
   *    let capture = $state(new EventCapture());
   *    const someEvent = capture.on('someEvent');
   *
   *    // …
   *
   *    <EventLog events={capture.events} clear={capture.clear.bind(capture)} />
   */

  let { events, clear = () => {} } = $props();

  function onclick() {
    clear();
  }
</script>

<button {onclick}>clear</button>
<table>
  <thead>
    <tr>
      <th>event</th>
      <th>arguments</th>
    </tr>
  </thead>
  <tbody>
    {#each events as { event, args }}
      <tr>
        <td>{event}</td>
        <td><code>{JSON.stringify(args)}</code></td>
      </tr>
    {/each}
  </tbody>
</table>
