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

	export let sender;
	export let messages;

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

<div class="card card-hover m-4 relative">
	<span class="chip variant-soft sticky top-o left-0">
		<!-- TODO: should this show up for only the first of a run? -->
		@{name}:
	</span>
	{#each messages as { at, body }}
		<Message {at} {body} />
	{/each}
</div>
