<script>
  import { logins, currentUser } from '$lib/store';
  import Message from '$lib/components/Message.svelte';

  let { sender, messages } = $props();

  let name = $derived($logins.get(sender));
  let ownMessage = $derived($currentUser !== null && $currentUser.id == sender);
</script>

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