@props(['message' => [], 'showAvatar' => true, 'isOwn' => false])

<div class="flex items-start gap-3 {{ $isOwn ? 'flex-row-reverse' : '' }}">
    @if($showAvatar)
        <x-rp-avatar :name="$message['sender_name'] ?? ''" :src="$message['sender_avatar'] ?? null" size="sm" />
    @endif
    <div class="flex-1 max-w-[75%]">
        <div class="flex items-center gap-2 mb-1 {{ $isOwn ? 'justify-end' : '' }}">
            <span class="text-xs font-semibold text-slate-700 dark:text-slate-300">{{ $message['sender_name'] ?? '' }}</span>
            <span class="text-xs text-slate-400">{{ $message['time'] ?? '' }}</span>
        </div>
        <div class="rounded-xl px-4 py-2.5 {{ $isOwn ? 'bg-primary-600 text-white rounded-tr-sm' : 'bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200 rounded-tl-sm' }}">
            <p class="text-sm">{{ $message['body'] ?? '' }}</p>
        </div>
        @if(isset($message['attachment']))
            <div class="mt-1.5 flex items-center gap-2 text-xs text-slate-500">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                <span>{{ $message['attachment'] }}</span>
            </div>
        @endif
    </div>
</div>