<script lang="ts">
	let { message, sent } = $props();

	const side = sent ? "ml-auto" : "mr-auto";
	const color = sent ? "text-primary" : "text-inverted";
	const bg = sent ? "bg-inverted" : (message.Internal ? "bg-emessage-message" : "bg-external-message");
</script>

<div class="{side} {color} {bg} p-2 rounded-lg max-w-96 break-all w-fit" hidden={message.Hidden}>
	{#each message.MessageContents as content}
		{#if content.MIMEType === "text/plain"}
			{atob(content.Content)}
		{:else}
		{/if}
	{/each}
</div>