@props(['type'])

<div class="flex gap-3">
    <img :src="avatarUrl(type === 'reply' ? reply.user.name : comment.user.name)" 
         :class="type === 'reply' ? 'w-6 h-6' : 'w-8 h-8'" 
         class="rounded-full bg-gray-200 flex-shrink-0">
    
    <div class="flex-1">
        <div :class="type === 'reply' ? 'bg-gray-100 p-2.5' : 'bg-white p-3'" class="rounded-lg border border-gray-200 shadow-sm">
            <div class="flex justify-between items-start">
                <span class="font-bold text-xs text-gray-900" x-text="type === 'reply' ? reply.user.name : comment.user.name"></span>
                <span class="text-[10px] text-gray-400">Just now</span>
            </div>
            <p class="text-sm text-gray-700 mt-1" x-text="type === 'reply' ? reply.content : comment.content"></p>
        </div>
        
        <div class="flex items-center gap-4 mt-1 pl-1">
            <span class="text-xs font-medium text-gray-400">Like</span>
            <span class="text-xs font-medium text-gray-400" x-show="type !== 'reply'">Reply</span>
        </div>
    </div>
</div>