<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:own-message={ownMessage}
  class:other-message={!ownMessage}
>
  <span>
    @{name}:
  </span>
  {#each messages as message}
    <Message {...message} editable={ownMessage} />
  {/each}
</div>

<style>
  .own-message {
    background-color: rgb(32, 42, 74);
  }
  /* Honestly, I don't love scoping styles per component, and this is a great
   * example of why. MessageRuns know if they're own-message, but Messages in
   * them need to get a style based on that fact. I don't wanna bucket-brigade
   * that fact into the Message, when it's a pure CSS concern.
   */
  .own-message :global(*) {
    color: rgb(198, 198, 198);
  }
</style>
