<script>
  import Message from '$lib/components/Message.svelte';

  let { sender, messages, ownMessage, deleteMessage = async (id) => {} } = $props();
</script>

<div class="message-run" class:own-message={ownMessage} class:other-message={!ownMessage}>
  <span class="username">
    @{sender}:
  </span>
  {#each messages as message}
    <Message {...message} editable={ownMessage} {deleteMessage} />
  {/each}
</div>
