<script lang="ts">
	import type { ChatMessage } from '$lib/types';

	let { message }: { message: ChatMessage } = $props();

	const isUser = $derived(message.role === 'user');
</script>

<div class="flex {isUser ? 'justify-end' : 'justify-start'} mb-3">
	<div
		class="max-w-[75%] rounded-2xl px-4 py-2.5 {isUser
			? 'bg-blue-600 text-white rounded-br-md'
			: 'bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-bl-md'}"
	>
		<p class="text-sm whitespace-pre-wrap">{message.content}</p>
		<time class="mt-1 block text-xs {isUser ? 'text-blue-200' : 'text-gray-500 dark:text-gray-400'}">
			{message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
		</time>
	</div>
</div>
