<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="card card-hover m-4 px-4 py-1 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>
