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

    export let sender;
    export let messages;

    let name;
    $: name = $logins.get(sender);
    $: ownMessage = $currentUser.id == sender;
</script>

<div
        class="card card-hover m-4 relative"
        class:own-message={ownMessage}
        class:other-message={!ownMessage}>
    <span class="chip variant-soft sticky top-o left-0">
        @{name}:
    </span>
    {#each messages as { at, body }}
        <Message {at} {body} />
    {/each}
</div>

<style>
    .own-message {
        width: 80%;
        margin-right: auto;
    }
    .other-message {
        width: 80%;
        margin-left: auto;
    }
</style>
